When working with React and TypeScript, it's important to type your functional components so TypeScript can catch mistakes before they reach the browser. Typing props makes your components predictable, safer, and easier to understand. The first step is to describe the structure of your props using either an interface or a type alias. This tells TypeScript exactly what values your component expects. Then, you apply that type to the component's props.

Here is a simple example of a typed functional component that receives a label prop:

type ButtonProps = {
  label: string;
};

function Button({ label }: ButtonProps) {
  return <button>{label}</button>;
}

In this version, the Button component accepts only one prop — a string called label. If you try to pass anything else (like a number), TypeScript will show an error during development. This helps you avoid common bugs and makes your code easier to maintain.

You can also specify the return type explicitly using JSX.Element, although TypeScript can usually infer it:

function Button({ label }: ButtonProps): JSX.Element {
  return <button>{label}</button>;
}

Key points to remember:

• Define small, clear prop types with type or interface;
• Type the props directly on the component function;
• Rely on TypeScript to warn you about incorrect prop usage;