The Coding Techniques for TypeScript in React

Shota Nukumizu
2 min readAug 13, 2022

--

Two web creators designing a web site
©storyset

How to create a union type for the constant key

How to create a union type of constant values

How to downcast

How to use property types in Material UI

TextField types can be inherited by TextFieldProps, but if you want to use the name property of a TextField, write the following.

Frequently used comment prefixes and annotated comments

  • FIXME: Defective code. It indicates a feature that must be fixed.
  • TODO: Should be done, but lower priority than FIXME.
  • NOTE: Write the intent of the implementation and the reason for coding.
  • HACK: The part you want to refactor.
  • WARNING: Cautions.

How to code a OR sequence in TypeScript(React)

How to code an AND sequence in TypeScript(React)

It means a spread syntax. It has a very wide range of uses and must be kept in mind. The following program is an example of the use of the spread syntax.

State management using useState

When the value of a variable is updated, the displayed value is changed at the same time. useState is a split assignment of an array into two variables.

  • The first variable is used to display the state
  • The second variable is a function to update the state value

forwardRef/createRef

Ref forwarding is a technique for automatically passing a ref through a component to one of its children. This is typically not necessary for most components in the application.

createRef

forwardRef

Reference

--

--