TypeScript Cheatsheet 05 — Type Guards and Narrowing

function f(x: string | number) {
  if (typeof x === "string") x.toUpperCase();    // string
  else x.toFixed();                              // number
}

function fail(err: unknown) {
  if (err instanceof Error) {
    err.message;
    err.stack;
  }
}

type Cat = { meow(): void };
type Dog = { bark(): void };

function speak(a: Cat | Dog) {
  if ("bark" in a) a.bark();
  else a.meow();
}

type Shape =
  | { kind: "circle"; r: number }
  | { kind: "square"; size: number }
  | { kind: "rect"; w: number; h: number };

function area(s: Shape): number {
  switch (s.kind) {
    case "circle": return Math.PI * s.r ** 2;
    case "square": return s.size ** 2;
    case "rect": return s.w * s.h;
  }
}

function area(s: Shape): number {
  switch (s.kind) {
    case "circle": return Math.PI * s.r ** 2;
    case "square": return s.size ** 2;
    case "rect": return s.w * s.h;
    default: {
      const _exhaustive: never = s;
      throw new Error(`unreachable: ${_exhaustive}`);
    }
  }
}

function isString(x: unknown): x is string {
  return typeof x === "string";
}

function isUser(x: unknown): x is User {
  return (
    typeof x === "object" &&
    x !== null &&
    "id" in x && typeof (x as any).id === "number"
  );
}

function assert(cond: unknown, msg?: string): asserts cond {
  if (!cond) throw new Error(msg);
}

function assertIsString(x: unknown): asserts x is string {
  if (typeof x !== "string") throw new TypeError("not string");
}

// Use
function f(x: unknown) {
  assertIsString(x);
  x.toUpperCase();        // x is string after assertion
}

function f(s: string | null) {
  if (s) s.toUpperCase();      // string (not null, not "")
}

function f(x: string | number, y: string | boolean) {
  if (x === y) {
    // both narrowed to string
    x.toUpperCase();
    y.toUpperCase();
  }
}

function f(x: string | null) {
  if (x === null) return;
  x.toUpperCase();             // x: string here
}

// Predicate: returns boolean, narrows
function isUser(x: unknown): x is User { ... }
if (isUser(x)) x.id;

// Assertion: throws, narrows after call
function assertUser(x: unknown): asserts x is User { ... }
assertUser(x);
x.id;

type Result<T> =
  | { status: "ok"; value: T }
  | { status: "loading" }
  | { status: "error"; error: string };

function render(r: Result<string>) {
  switch (r.status) {
    case "ok": return r.value;
    case "loading": return "...";
    case "error": return r.error;
  }
}

const xs: (string | number)[] = [];

if (xs.every(x => typeof x === "string")) {
  // xs still (string | number)[] — `every` doesn't narrow
}

// Use a type predicate:
function allStrings(arr: unknown[]): arr is string[] {
  return arr.every(x => typeof x === "string");
}

if (allStrings(xs)) {
  xs.map(s => s.toUpperCase());
}

function f(x: { a?: string }) {
  if (x.a) x.a.toUpperCase();   // narrowed
  
  // But function call resets:
  function inner() { x.a.toUpperCase(); }  // ERROR
}

const a = x.a;
if (a) {
  function inner() { a.toUpperCase(); }    // ok
}

function f(x: "a" | "b") { ... }

const k = "a";              // type: "a"
f(k);                       // ok

let k2 = "a";               // type: string — no good!
f(k2);                      // ERROR

let k3 = "a" as const;      // type: "a"
f(k3);                      // ok

type UserId = string & { __brand: "UserId" };

function makeUserId(s: string): UserId {
  return s as UserId;
}

function getUser(id: UserId) { ... }

const raw = "abc";
getUser(raw);              // ERROR
getUser(makeUserId(raw));  // ok