In React applications, static type checking is used to catch type-related errors during development rather than at runtime. This helps improve code quality, maintainability, and developer experience. There are two main ways to perform static type checking in React:

1. Using TypeScript

TypeScript is the most popular choice for static type checking in React. It is a superset of JavaScript that adds optional static typing.

Benefits:

• Detects type errors at compile time
• Provides powerful features like interfaces, enums, generics, etc.
• Enhances IDE support with autocompletion and refactoring tools

Example:

type UserProps = {
  name: string;
  age: number;
};

const UserCard: React.FC<UserProps> = ({ name, age }) => {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
};

Setup:

• Install TypeScript and the necessary type definitions:

  npm install typescript @types/react @types/react-dom

• Rename files from .js to .tsx.

2. Using PropTypes

PropTypes is a built-in React feature that allows you to check props types during runtime.

Benefits:

• Lightweight and easy to add
• No build setup required
• Good for small to medium projects

Example:

import PropTypes from 'prop-types';

function UserCard({ name, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
}

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

Note: PropTypes only checks types at runtime (during development), while TypeScript checks at compile time.

---

Conclusion:

• TypeScript is preferred for larger projects and stricter type checking at the code level.
• PropTypes is simpler and great for adding quick validations without additional tooling.

Both methods help catch bugs early and make your React codebase more robust and maintainable.

---