How do I use TypeScript interfaces and types in React?

How do I use TypeScript interfaces and types in React?

You can use TypeScript interfaces and types to define the shape of props and state in your React components. This helps with type safety.

Can you give me an example of an interface for a component's props?

Sure! Here's a simple example:

interface UserProps {
  name: string;
  age: number;
}

const User: React.FC<UserProps> = ({ name, age }) => {
  return <div>{name} is {age} years old.</div>;
};

What about using types instead of interfaces?

You can use types similarly. For example:

type UserProps = {
  name: string;
  age: number;
};

const User: React.FC<UserProps> = ({ name, age }) => {
  return <div>{name} is {age} years old.</div>;
};

Are there any differences between using types and interfaces?

Yes, interfaces can be extended and merged, while types cannot. However, both can be used for defining props effectively.