Used in projects

TypeScript helps us detect types and makes it easy to use/read other modules. Javascript often uses PropTypes to define types, but it’s not very precise.

TS of props, the state can be restricted – this is suitable for the type of component and function component. (used to interface, can also use the type, the reference: www.typescriptlang.org/docs/handbo.)

1. Class components:

2. Function components:

1. The first one

2. The second

3. Default values:

So that’s the distinction. Class components are written differently than function components. (Using function components is recommended.

Function component

1. The first one

2. The second

Class components

3. Pass parameter as callback:

(function definitions refer to: www.typescriptlang.org/docs/handbo.)

4. Added:

1. Add parameter description:

The parameter description can be seen at the time of use

2. Add type declaration to existing JS:

For the imported path, define as module; (use the declare the module, the reference: www.typescriptlang.org/docs/handbo.)

In the module declaration, for the exported method or parameter definition type, the declaration file is managed in the @type file (to be improved and supplemented ~).

If the module is exported by default, use export default. If multiple modules are exported, use export

Example :(original Screen component)

When using need to introduce path import Screen from ‘@ / common/components/Screen, applies in js, but there won’t be in js error;

Use: (backgroundType as an example: specify a value)

5. Use:

1. If a parameter is incorrectly passed or a required parameter is not passed, a response message will be displayed

Use the react Hook with TS

1. UseState:

(Same with other hooks)

const [sliderRef, setSliderRef] = useState<number>(0);

// Add the type to the <> of useState, otherwise the default value will be derived

2. Special Instructions:

When using forwardRef (parent component control child components) will be one more ref parameters: (use the react the react. ForwardRefRenderFunction)

Use:

\