React with TypeScript Examples

Typing Functional Components

Functional components are the most common way to write React components. TypeScript allows you to define the types of props these components receive.

Using the React.FC type or explicit prop interfaces helps ensure your components receive the correct data.

• Define an interface for props.
• Use React.FC<Props> or annotate the function parameter.
• Ensure props are correctly typed to catch errors early.

Typing State with useState Hook

The useState hook manages component state. TypeScript can infer types from initial values, but sometimes you need to explicitly specify the type, especially for complex or nullable states.

• Use generics to specify the state type: useState<Type>()
• Provide initial state or undefined for nullable states.
• TypeScript helps prevent invalid state assignments.

Typing Event Handlers

React events have specific types in TypeScript. Typing event handlers correctly ensures you access event properties safely.

• Use React.ChangeEvent<HTMLInputElement> for input change events.
• Use React.MouseEvent<HTMLButtonElement> for button clicks.
• Always type the event parameter in handlers.