react-typescript-components/

[utterances-bot]

How to create React components with TypeScript

Using TypeScript together with React has proven to be a powerful combination. Some people are afraid to move to TypeScript because they…

https://felixgerschau.com/react-typescript-components/

[DWboutin]

Nice article! You should talk a little about FunctionComponent and VoidFunctionComponent interfaces usages and differences.

[ArronJLinton]

Thanks for the article! I'd love to hear more about your thoughts/experience on using interface vs type.

[fgerschau]

@DWboutin, thanks for the feedback; there are many ways to define components. This is probably worth an article on its own.

@ArronJLinton, interfaces and types are very similar, and in some cases, you can use them interchangeably. However, interfaces offer more features than types.

I usually default to interfaces and only use types for simple type definitions, like, for example, unions, which are similar to enums.

type UserType = 'Manager' | 'User' | 'Admin' | 'Contractor';

I can't even think of other occasions where I use types right now, so this might be the only use-case I have for you.

[chipit24]

If you read through https://github.com/facebook/create-react-app/pull/8177, it seems the use of the FC generic is discouraged, and it's recommaneded to write your components like so:

const Title = ({ title, subtitle, children }: TitleProps): JSX.Element => {
    /* ... */
};

Re: interface vs type, to add my 2 cents, the TS docs mention this as well:

You’ll see that there are two syntaxes for building types: Interfaces and Types. You should prefer interface. Use type when you need specific features.

[Eventect]

Great article, thanks a lot!

[abduljeleelng]

Thanks for the pieces.