Typing Component Props

React components receive data through props. In TypeScript, you define what props should look like, so the component receives the correct data.

Define props type

type Props = {
  name: string;
};

This describes the shape of props. name must exist. name must be a string.

Use it in the component

function Greeting(props: Props) {
  return <h2>Hello, {props.name}</h2>;
}

Here, props must follow the Props structure. If you pass something wrong, TypeScript will show an error.

Short version

function Greeting({ name }: Props) {
  return <h2>Hello, {name}</h2>;
}

This is the same thing, just shorter.

Optional Props

type Props = {
  name: string;
  age?: number;
};

The ? means the prop is optional.

TypeScript lets you control what data your component receives, making components safer and easier to use.