How do I use PropTypes with React and TypeScript?

How do I use PropTypes with React and TypeScript?

You can use PropTypes in a React component by importing PropTypes and defining the prop types for your component. However, TypeScript provides its own type-checking, so you might not need PropTypes if you're already using TypeScript.

Can you show me an example of a component using both?

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;

Is it common to use both PropTypes and TypeScript together?

It's not very common to use both together since TypeScript provides static type checking, which often makes PropTypes redundant. However, some developers still use PropTypes for runtime validation.

What are the benefits of using TypeScript over PropTypes?

TypeScript offers static type checking, better IDE support, and improved developer experience with autocompletion and error checking at compile time, which can lead to fewer runtime errors.