How do I use PropTypes with TypeScript?

How do I use PropTypes with TypeScript?

You can use PropTypes with TypeScript to validate props in your components. However, TypeScript itself provides type checking, so it's often redundant. Would you like to see an example?

Yes, please show me an example!

Sure! Here's a simple example:

import React from 'react';
import PropTypes from 'prop-types';

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

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

MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
};

export default MyComponent;

In this example, TypeScript checks the types, and PropTypes provides runtime validation.

What if I want to use default props?

You can set default props in TypeScript like this:

MyComponent.defaultProps = {
  age: 18,
};

This way, if no age is provided, it defaults to 18.

Thanks! This was really helpful.

You're welcome! If you have any more questions about TypeScript or React, feel free to ask!