How do I define interfaces in TypeScript for a React component?

How do I define interfaces in TypeScript for a React component?

You can define an interface in TypeScript by using the interface keyword. For example:

interface MyComponentProps {
  title: string;
  isActive: boolean;
}

Then, you can use this interface in your React component like this:

const MyComponent: React.FC<MyComponentProps> = ({ title, isActive }) => {
  return <h1>{title} is {isActive ? 'active' : 'inactive'}</h1>;
};

Can I use types instead of interfaces?

Yes, you can use type aliases instead of interfaces. They work similarly. For example:

type MyComponentProps = {
  title: string;
  isActive: boolean;
};

You can then use MyComponentProps in the same way as an interface.

What are the advantages of using interfaces over types?

Interfaces are extendable, meaning you can create new interfaces based on existing ones. Types are more flexible but can't be merged like interfaces. If you need to extend or implement, interfaces are often preferred.

Can I define default props for my component?

Yes, you can define default props using the defaultProps property on your component. For example:

MyComponent.defaultProps = {
  isActive: false,
};