How do I set default props in a React component using TypeScript?

How do I set default props in a React component using TypeScript?

You can set default props in a React component by using the defaultProps property or by using ES6 default parameters.

Can you show me an example of both methods?

Sure! For defaultProps, you can define it like this:

import React from 'react';

interface MyComponentProps {
  name?: string;
}

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

MyComponent.defaultProps = {
  name: 'Guest',
};

And for ES6 default parameters:

const MyComponent: React.FC<MyComponentProps> = ({ name = 'Guest' }) => {
  return <div>Hello, {name}</div>;
};

Are there any differences in how TypeScript handles these methods?

Yes, with defaultProps, TypeScript infers the prop types correctly, while with default parameters, you need to ensure the type is optional in the interface.