DEV Community

Typescript. Simple React components.

Maksim on August 27, 2019

Hello there. I very like to use React and Typescript. Almost in each new project need simple components, like atoms, for example: button, input, ch...

Read full post

Stefano Armenes • Aug 27 '19

You can also use React.FC instead of React.FunctionComponent 😃

Maksim • Aug 27 '19

Thx) Awesome!

Kris Temmerman • Aug 27 '19

Nice article! you've made a small typo

export const Button: React.FunctionComonent<IProps> = ({ block, ...shared }) => {
  return <button {...shared}>{children}</button>;
}

should be Component or .FC

Maksim • Aug 27 '19

React.FC and React.FunctionComponent is the same

Kris Temmerman • Aug 28 '19 • Edited

Yeah I know but look closely.
thepracticaldev.s3.amazonaws.com/i...

Maksim • Aug 28 '19

Oh, sorry! Thanks)

HCB • Aug 28 '19 • Edited

Instead of defaultProps, I use:

export const Button: React.FunctionComponent<IProps> = ({ block, children, type = 'button', ...shared }) => {
  return <button type={type} {...shared}>{children}</button>;

}

Ruslan Shashkov • Nov 11 '19 • Edited

It also would be better to use Extract on the shared button props to extract only InputHTMLAttributes<HTMLInputElement> props for <button {...extractedProps}>. In case if you decided to use some custom props for example loading: boolean it will also be sent to <button/> and cause warnings that your loading prop is not in default button props.

Eric Andre • Aug 28 '19

I'm a little confused. You keep saying this provides "strict" typing, which I assume you mean strong typing. Since typescript happens before runtime and converts the code to javascript which will be executed in a javascript runtime, which is weakly typed your code will also be weakly typed. Typescript won't magically make the javascript runtime strongly typed. Are you meaning to say it provides static typing? Sorry, this very much is a semantic issue I'm trying to clarify.

Maksim • Aug 28 '19

I mean, that you have typings better than any and unnecessary to declare each native html property.

Kevin Sullivan • Aug 27 '19

Although, there are differences between interface extends and &