What are union types in TypeScript and how can I use them in React?

What are union types in TypeScript?

Union types in TypeScript allow you to define a variable that can hold multiple types. For example, you can declare a variable as string | number, meaning it can be either a string or a number.

How can I use union types in a React component?

You can use union types in props for a React component. For instance, if a prop can be either a string or a number, you can define it like this: interface MyComponentProps { value: string | number; }.

Can you give me an example of a React component using union types?

Sure! Here's a simple example:

interface MyComponentProps {
  value: string | number;
}

const MyComponent: React.FC<MyComponentProps> = ({ value }) => {
  return <div>{value}</div>;
};

This component will render the value prop, whether it's a string or a number.

What are the benefits of using union types?

Union types enhance type safety and flexibility in your code, allowing you to handle multiple data types without losing the benefits of TypeScript's type checking.