# Useful TypeScript Patterns

# Define type variations

The common property type is used to pivot.

type DeskItem =
  | { type: "lamp" }
  | { type: "notebook"; size: "A5" | "A4" }
  | { type: "pen"; penType: "ballpoint" | "rollerball" | "fountain" };

Other suggested pivot property names:

  • base
  • action — params are then the other properties
  • kind — if the name type has some other important meaning

# Extracting a single variation (subset of another type)

type DeskItem =
  | { type: "lamp" }
  | { type: "notebook"; size: "A5" | "A4" }
  | { type: "pen"; penType: "ballpoint" | "rollerball" | "fountain" };

type Pen = Extract<DeskItem, { type: "pen" }>; // { type: "pen"; penType: "ballpoint" | "rollerball" | "fountain" }
type PenType = Pen["penType"]; // "ballpoint" | "rollerball" | "fountain"

# Borrowing the types of a third-party library

import { render } from "@testing-library/react";

type Rendered = ReturnType<typeof render>;

# Testing TypeScript types