TypeScript in React

Combining TypeScript with React lets you describe exactly what props a component expects and what shape its state takes, so mistakes like passing a number where a string was expected, or forgetting a required prop entirely, are caught by your editor and the compiler before the app ever runs. This is one of the most common and highest-value uses of TypeScript in professional frontend work, since prop-related bugs are a frequent source of confusing runtime behavior in plain JavaScript React apps.

Why it matters

Most React teams now write TypeScript. Typed props mean that a component used with a missing or misspelled prop fails in the editor instead of in the browser, and they act as documentation that cannot go out of date. Job listings for React roles ask for it almost as often as for React itself.

Typing Component Props with an Interface

You define an interface describing the props a component accepts, then use it as the type of the function's single props parameter: function UserCard({ name, age }: UserCardProps). Optional props are marked with a question mark (age?: number), and any prop not marked optional is required — omitting it is a compile-time error, not a silent undefined discovered later.

Typing useState with a Generic

useState infers its type from the initial value by default (useState(0) infers number), but when the initial value doesn't fully describe the type — commonly when starting from null or an empty array — you supply the type explicitly as a generic: useState<User | null>(null). This tells TypeScript the state will eventually hold a User object, even though it starts out as null, so later code that reads it is checked against the full type.

Why Typed Props Prevent a Whole Class of Bugs

Without types, passing <UserCard age="25" /> (a string) where a number was intended, or forgetting the required name prop entirely, produces no error — the component simply renders incorrectly or displays "undefined" somewhere, and you have to trace the bug back through the component tree. With a typed UserCardProps interface, the exact same mistake is flagged by the editor the moment you write the JSX, with a message naming the offending prop and the expected type.

Example

import { useState } from 'react';

interface User {
  id: number;
  name: string;
}

interface UserCardProps {
  name: string;
  age?: number;
}

function UserCard({ name, age }: UserCardProps) {
  return (
    <div className="card">
      <h3>{name}</h3>
      {age !== undefined && <p>Age: {age}</p>}
    </div>
  );
}

function App() {
  const [user, setUser] = useState<User | null>(null);

  return (
    <div>
      <UserCard name="Asha Patel" age={28} />
      <button onClick={() => setUser({ id: 1, name: 'Ravi Kumar' })}>
        Load User
      </button>
      {user && <p>Loaded: {user.name}</p>}
    </div>
  );
}

// The following would fail to compile:
// <UserCard age={28} />
// Error: Property 'name' is missing in type '{ age: number; }'
// but required in type 'UserCardProps'.

The page renders a card showing "Asha Patel" and "Age: 28," plus a "Load User" button. Clicking it sets state and renders "Loaded: Ravi Kumar" below. The commented-out <UserCard age={28} /> line fails to compile because the required "name" prop is missing, catching the mistake before the app ever runs.

Exercise

Do this in a Vite project created with the react-ts template, in src/App.tsx. Type the props of the UserCard component with an interface: a required string name, a required number age and an optional boolean isAdmin. In App, type the selected user's state as a string or null.

Expected result: the code compiles; leaving out name, or passing a string as age, is reported as an error in the editor.

import { useState } from "react";

// TODO: interface UserCardProps

function UserCard({ name, age, isAdmin }) {
  return (
    <p>
      {name}, {age} {isAdmin ? "(admin)" : ""}
    </p>
  );
}

export default function App() {
  // TODO: give this state the type string | null
  const [selected, setSelected] = useState(null);

  return (
    <div onClick={() => setSelected("Asha")}>
      <UserCard name="Asha" age={30} isAdmin />
      <p>Selected: {selected}</p>
    </div>
  );
}

import { useState } from "react";

interface UserCardProps {
  name: string;
  age: number;
  isAdmin?: boolean;
}

function UserCard({ name, age, isAdmin }: UserCardProps) {
  return (
    <p>
      {name}, {age} {isAdmin ? "(admin)" : ""}
    </p>
  );
}

export default function App() {
  const [selected, setSelected] = useState<string | null>(null);

  return (
    <div onClick={() => setSelected("Asha")}>
      <UserCard name="Asha" age={30} isAdmin />
      <p>Selected: {selected}</p>
    </div>
  );
}

Quick quiz

Interview questions