How do I create a TypeScript type definition for a stateless React component?

问题

I'm trying create type definitions for an existing suite of stateless React components, so I can generate documentation automagically and to improve intellisense in my team's tooling.

An example component could look like this:

myComponent.js

import React from 'react';

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

I would like my type definition to:

Define which props are allowed (and which are required)
That it will return JSX

Looking at this example of creating React components using TypeScript, I discovered the type: React.SFC.

I tried to use this in my definition:

index.d.ts

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

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

    export const MyComponent = React.SFC<MyComponentProps>
}

But I'm getting the linting error [ts] '(' expected.

I'm pretty new to TypeScript and I am clearly missing something, but I can't find any articles on creating type definitions for stateless components.

EDIT To be clear, I don't want to rewrite my components in TypeScript. I want to create a type definition file (*.d.ts) for an existing ES6 stateless component.

回答1:

After a lot of fiddling, we have settled on the following set up.

import React from 'react';

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

declare const MyComponent: React.SFC<MyComponentProps>

export default MyComponent

The inspiration for this was taken from: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/material-ui/index.d.ts

It works well with TypeDoc and also VS Code's intellisense.

I believe export default was the key to cracking intellisense here.

回答2:

Try this:

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

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

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

From official React page recommendations Type Definitions

回答3:

I think you need var MyComponent: React.SFC<MyComponentProps>;

You might consider rewriting existing code in typescript anyway just to see what kind of definitions tsc would generate. Then discard the code and keep just the definitions.

回答4:

Its, :, not =.

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

回答5:

You can try something like this.

export type YourComponentType = {
  props1,
  props2
}

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

export default YourComponent;

回答6:

I am using react typescript react boilerplate provided by Microsoft https://github.com/Microsoft/TypeScript-React-Starter

I create a stateless component in typescript like this:

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>
        );
    }
}

来源：https://stackoverflow.com/questions/50946979/how-do-i-create-a-typescript-type-definition-for-a-stateless-react-component

标签

reactjs

typescript

type-definition