javascript - Hur använder man TypeScript-modulförstärkning på rätt sätt för Material-UI-komponenter?


Jag har läst de befintliga svaren här och här, men de verkar vara föråldrade.

Jag har försökt följande för att utöka typdefinitionen för knappkomponenten, både i en separat typings-fil (.d.ts) och i React-komponenten själv, men utan framgång.

declare module "@material-ui/core/Button" {
  export interface ButtonProps {
    to?: string;  
  }
}

När det läggs i den separata .d.ts-filen får jag ett felmeddelande: 'JSX-elementtypen 'Button' har inga konstrukt- eller anropssignaturer.'

Om det läggs i samma fil som själva komponenten, klagar kompilatorn bara på att egenskapen 'to' inte finns på typen 'IntrinsicAttributes & ButtonProps & { children?: ReactNode; }' som om inget alls hade definierats.

Så jag undrar över det nuvarande korrekta sättet att utöka komponenttypdefinitioner i material-ui (v3.0.2).

Tack & Skål

Svar #1

Gränssnittet ButtonProps deklareras faktiskt i modulen @material-ui/core/Button/Button. Följande kod i din komponentfil bör fungera:

declare module "@material-ui/core/Button/Button" {
  export interface ButtonProps {
    to?: string;  
  }
}

Relaterade artiklar