React and Next.js TypeScript Patterns

Apply TypeScript to props, server data, forms, actions, and reusable components in complex frontend apps.

44 min

3 sections

react

nextjs

props

forms

01. Props as Product Contracts

Section 1 of 3

Component props are internal APIs. In enterprise apps, model props around the screen contract: what the component needs to render, what actions it can trigger, and which states are impossible.

typescript

type InvoiceCardProps =
  | {
      mode: "readonly";
      invoice: { id: string; status: "paid" | "void"; totalCents: number };
    }
  | {
      mode: "editable";
      invoice: { id: string; status: "draft" | "sent"; totalCents: number };
      onVoid: (id: string) => void;
      onSend: (id: string) => void;
    };

function InvoiceCard(props: InvoiceCardProps) {
  if (props.mode === "readonly") {
    return "Readonly invoice " + props.invoice.id;
  }
  return "Editable invoice " + props.invoice.id;
}

Exercise

Type a reusable data panel

Practice

Create props for a data panel that can be loading, error, empty, or ready. Only ready should include rows.

Advanced Type Manipulation

Inference Control, Satisfies, and Utility Types

Back to Course