How can I use PropTypes with TypeScript?

How can I use PropTypes with TypeScript?

You can use PropTypes alongside TypeScript to provide runtime type checking. While TypeScript offers compile-time checks, PropTypes can help catch errors during runtime.

Can you show me an example of how to implement this?

Sure! First, install PropTypes: npm install prop-types. Then, you can define your component like this:

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 ? age : 'unknown'} years old.</div>;
};

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

export default MyComponent;

What are the benefits of using both PropTypes and TypeScript?

Using both allows you to leverage TypeScript's static type checking during development and PropTypes' runtime validation in production, providing a safety net for your components.