Typescript. Simple React components.
(Source/Credits: https://dev.to/pretaporter/typescript-simple-react-components-occ)
How to write components with friendly interface, but also with strict typings.
title: Typescript. Simple React components. published: true description: How to write components with friendly interface, but also with strict typings. tags: #react #typescript #beginners #tutorial
Hello there. I very like to use React and Typescript. Almost in each new project need simple components, like atoms, for example: button, input, checkbox etc. I have some best practices to make it friendly for all members of team, but also with strict typings. Let's get a look, maybe it will be helpful for you too.
Button
```jsx import React from 'react';
interface IProps extends React.ButtonHTMLAttributes
export const Button: React.FunctionComponent
Button.defaultProps = { type: 'button', } ```
That's it. You have custom Button
component, that supports all native button attributes with strict typings. You can put common things for all buttons in project, like styles or some business logic.
For use import React from 'react'
instead of import * as React from 'react'
add in your tsconfig.json
property esModuleInterop: true
Input
```jsx import React from 'react';
interface IProps extends Omit
onChange(value: string): void; }
export const Input: React.FunctionComponent
Input.defaultProps = { type: 'text', }; ```
The Omit helper type was added in Typescript 3.5. If you use previous version of Typescript, just add this string:
type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
Checkbox
```jsx import React from 'react';
interface IProps extends Omit
export const Checkbox: React.FunctionComponent
Checkbox.defaultProps = {
type: 'checkbox',
}
```
Now you can use it like here:
jsx
<Checkbox checked={false} onChange={toggleCheckbox} />
It is end of small tutorial. If it will be helpful for someone, I can continue to explain some good things of React and Typescript. Thanks for attention.
Comments section
mbrtn
•May 1, 2024
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 exampleloading: boolean
it will also be sent to<button/>
and cause warnings that yourloading
prop is not in default button props.charlex
•May 1, 2024
Instead of
defaultProps
, I use:``` export const Button: React.FunctionComponent = ({ block, children, type = 'button', ...shared }) => {
return ;
}
```
ericandre615
•May 1, 2024
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.
pretaporter Author
•May 1, 2024
I mean, that you have typings better than
any
and unnecessary to declare each native html property.kristemmerman
•May 1, 2024
Nice article! you've made a small typo
``` export const Button: React.FunctionComonent = ({ block, ...shared }) => {
return ;
}
```
should be Component or .FC
pretaporter Author
•May 1, 2024
React.FC
andReact.FunctionComponent
is the samewolverineks
•May 1, 2024
Although, there are differences between interface extends and &
stearm
•May 1, 2024
You can also use
React.FC
instead ofReact.FunctionComponent
😃pretaporter Author
•May 1, 2024
Thx) Awesome!