React TypeScript Explained — Type-Safe React Components

In this tutorial, you will learn about React TypeScript Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

React TypeScript adds static Type Checking to React components, catching type errors during development and providing better autocompletion and documentation.

What You'll Learn

• How to type component props
• How to type useState and useReducer
• How to type event handlers
• How to type context
• Advanced type patterns

Why It Matters

TypeScript prevents entire categories of bugs: passing wrong props, accessing non-existent state properties, and calling functions with wrong arguments. It also improves developer experience with autocomplete.

interface User {
  id: number;
  name: string;
  email: string;
  role: "admin" | "user" | "viewer";
}

interface UserCardProps {
  user: User;
  onSelect: (id: number) => void;
  variant?: "compact" | "full";
}

function UserCard({ user, onSelect, variant = "compact" }: UserCardProps) {
  return (
    <div onClick={() => onSelect(user.id)}>
      <h3>{user.name}</h3>
      {variant === "full" && <p>{user.email}</p>}
      <span>Role: {user.role}</span>
    </div>
  );
}

type Action =
  | { type: "increment"; payload: number }
  | { type: "decrement" }
  | { type: "reset" };

function counterReducer(state: number, action: Action): number {
  switch (action.type) {
    case "increment": return state + action.payload;
    case "decrement": return state - 1;
    case "reset": return 0;
  }
}

Expected output: TypeScript ensures UserCard receives correct props, reducer handles all action types, and useNavigate receives valid paths.