PropTypes & TypeScript in React

From the React Components & JSX cheat sheet · Component Patterns & Types · verified Jul 2026

PropTypes & TypeScript

Add type checking to React components

typescript
// TypeScript (recommended) - compile-time prop checking
interface UserProps {
  name: string
  age?: number
  email: string
}

function User({ name, age = 0, email }: UserProps) {
  return <div>{name}, {age}, {email}</div>
}

// React 19 removed runtime propTypes - assigning User.propTypes
// is now ignored. For runtime validation, use a schema like Zod.
⚛️ TypeScript for compile-time checks; Zod for runtime validation
⚠️ React 19 removed propTypes - assigning .propTypes is silently ignored
💡 TypeScript gives better IDE support, autocomplete, and refactoring
📌 Use discriminated unions for mutually exclusive component variants

More React tasks

Back to the full React Components & JSX cheat sheet