Summary - Type narrowing

Write a mixed data parser with narrowing.

Summary - Type narrowing

Type narrowing reduces a union type to a specific subtype in a given branch. typeof narrows primitive types, in narrows by object property, instanceof narrows by class. Choosing the right tool depends on the data: typeof for primitives, in for objects of different shapes, instanceof for class instances.

type Data = string | number | { name: string } | Error;

function describe(d: Data): string {
  if (typeof d === "string") return `string: ${d}`;
  if (typeof d === "number") return `number: ${d}`;
  if (d instanceof Error) return `error: ${d.message}`;
  if ("name" in d) return `object: ${d.name}`;
  return "unknown";
}

Exercise Write a mixed data parser

Define the type Data = string | number | { name: string } | Error. Write a describe(d: Data): string function. In order: if typeof d === "string", return `string: ${d}`; if typeof d === "number", return `number: ${d}`; if d instanceof Error, return `error: ${d.message}`; otherwise return `object: ${d.name}`. Print results via console.log(describe("hello")), console.log(describe(42)), and console.log(describe({ name: "table" })).

Show example solution

type Data = string | number | { name: string } | Error;

function describe(d: Data): string {
  if (typeof d === "string") return `string: ${d}`;
  if (typeof d === "number") return `number: ${d}`;
  if (d instanceof Error) return `error: ${d.message}`;
  return `object: ${d.name}`;
}

console.log(describe("hello"));
console.log(describe(42));
console.log(describe({ name: "table" }));

Test yourself

Which of the following narrowing methods is appropriate for class instances?
- typeof
- instanceof
- ===
- in
Show answer

instanceof — To narrow class instances, instanceof is used; it checks the prototype chain and narrows to the correct class. typeof returns only "object" for objects and does not give the class name.

The right narrowing tool

type Data = string | { name: string };

function label(d: Data): string {
  if (____) {
    return d;
  }
  return d.name;
}

Show answer

type Data = string | { name: string };

function label(d: Data): string {
  if (typeof d === "string") {
    return d;
  }
  return d.name;
}

Type narrowing summary matching

typeof

narrows primitive types
in operatörü

narrows by object property
instanceof

narrows by class
Daraltma (narrowing)

reduces union type in a branch

Next lesson: What is a discriminated union?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies