When building React components with TypeScript, you gain strong typing for props, which leads to safer and more maintainable code. You can specify which props are required, which are optional, use union types to allow multiple value variants, and explicitly type the children prop for maximum flexibility and clarity.

To define required props, you simply declare them in your interface or type. If you want to allow a prop to be optional, add a question mark (?) after the prop name. This tells TypeScript that the component can be used with or without that prop. Unions let you specify that a prop can accept more than one type of value, which is useful for variant-based components. Finally, typing children helps ensure your component can safely receive and render nested elements or content.

Consider these examples:

// Required prop
type GreetingProps = {
  name: string; // 'name' is required
};

function Greeting({ name }: GreetingProps) {
  return <div>Hello, {name}!</div>;
}

// Optional prop
type ButtonProps = {
  label: string;
  color?: string; // 'color' is optional
};

function Button({ label, color }: ButtonProps) {
  return <button style={{ color }}>{label}</button>;
}

// Union type for variants
type AlertProps = {
  type: "success" | "error" | "info";
  message: string;
};

function Alert({ type, message }: AlertProps) {
  return <div className={`alert alert-${type}`}>{message}</div>;
}

// Typing children
type CardProps = {
  children: React.ReactNode;
};

function Card({ children }: CardProps) {
  return <div className="card">{children}</div>;
}

Typing props in this way improves component reusability and safety. By declaring prop types, you make it clear to other developers how your component should be used, and TypeScript will catch mistakes at compile time. Required props enforce that essential data is always provided, while optional props add flexibility. Union types make components more adaptable to different use cases. Explicitly typing children not only documents intent but also prevents runtime errors from unexpected content. Overall, strong prop typing leads to more predictable, robust React code.