web-dev-qa-db-fra.com

Comment créer une définition de type TypeScript pour un composant sans état React?

J'essaie de créer des définitions de type pour une suite existante de composants sans état React, afin de pouvoir générer de la documentation de manière automatique et d'améliorer intellisense dans les outils de mon équipe.

Un exemple de composant pourrait ressembler à ceci:

myComponent.js 

import React from 'react';

export const MyComponent = ({ prop1, prop2, prop3 }) => (
    <div>
        { prop1 ? prop2 : prop3 }
    </div>
);

J'aimerais que ma définition de type:

  • Définissez les accessoires autorisés (et ceux qui sont requis)
  • Qu'il retournera JSX

En regardant ceci exemple de création de composants React à l'aide de TypeScript, j'ai découvert le type: React.SFC.

J'ai essayé d'utiliser ceci dans ma définition:

index.d.ts 

declare module "MyComponent" {
    import React from 'react';

    interface MyComponentProps {
        prop1: boolean;
        prop2?: string;
        prop3?: string;
    }

    export const MyComponent = React.SFC<MyComponentProps>
}

Mais je reçois l'erreur de peluchage [ts] '(' expected.

Je suis assez nouveau sur TypeScript et il me manque clairement quelque chose, mais je ne trouve aucun article sur la création de définitions de type pour les composants sans état.

[~ # ~] edit [~ # ~] Pour être clair, je ne veux pas réécrire mes composants en TypeScript. Je souhaite créer un fichier de définition de type (* .d.ts) pour un composant sans état ES6 existant.

reactjstypescripttype-definition
10
penguinflip

Après beaucoup de violon, nous avons décidé de la configuration suivante.

import React from 'react';

export interface MyComponentProps {
    prop1: boolean;
    prop2?: string;
    prop3?: string;
}

declare const MyComponent: React.SFC<MyComponentProps>

export default MyComponent

L'inspiration pour cela a été tirée de: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/material-ui/index.d.ts

Cela fonctionne bien avec TypeDoc et aussi avec l'intellisense de VS Code.

Je crois export default était la clé pour casser l'intellisense ici.

8
penguinflip

Essaye ça:

declare module "MyComponent" {
  import React from 'react';

  interface MyComponentProps {
    prop1: boolean;
    prop2?: string;
    prop3?: string;
  }

  export const MyComponent: (props: MyComponentProps) => React.SFC<MyComponentProps>
}

De la page officielle React recommandations de la page Définitions de type

3
suleyman

Je pense que vous avez besoin de var MyComponent: React.SFC<MyComponentProps>;

Vous pourriez envisager de réécrire le code existant dans TypeScript de toute façon juste pour voir quel type de définitions tsc générerait. Jetez ensuite le code et ne conservez que les définitions.

2
Tommi Komulainen

Son, :, ne pas =.

export const MyComponent:React.SFC<MyComponentProps> = ({ prop1, prop2, prop3 }) => (
<div>
    { prop1 ? prop2 : prop3 }
</div>
);
1
Rohith Murali

Vous pouvez essayer quelque chose comme ça.

export type YourComponentType = {
  props1,
  props2
}

const YourComponent = ({
  props1,
  props2,
  ...restProps //additional props if passed to components.
}: YourComponentType) => (
  <div>{props1}</div>
)

export default YourComponent;
0
A Qadeer Qureshi

J'utilise le passe-partout React TypeScript React fourni par Microsoft https://github.com/Microsoft/TypeScript-React-Starter

Je crée un composant sans état dans TypeScript comme ceci:

export interface IMyComponentProps {
   prop1: string;
   prop2: (event: React.MouseEvent) => void;
   prop3: number;
}

export class MyComponent extends React.Component<IMyComponentProps> {
    render(): JSX.Element {
        const {prop1, prop2} = this.props

        return (
            //My code here
            <button>prop1</button>
            <button>prop2</button>
        );
    }
}
0
GAJESH PANIGRAHI