Unions and Literal Types

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21// A vertical bar between types means "one of these".
type Id = string | number;

function show(id: Id): string {
  return `id: ${String(id)}`;
}

console.log(show('a-1'));
console.log(show(42));

// Unions can have as many members as you like.
type Primitive = string | number | boolean | null;

function describe(value: Primitive): string {
  return `${typeof value}: ${String(value)}`;
}

console.log(describe('text'));
console.log(describe(1));
console.log(describe(true));
console.log(describe(null));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21type Direction = 'north' | 'south' | 'east' | 'west';

function move(steps: number, heading: Direction): string {
  return `${steps} paces ${heading}`;
}

console.log(move(3, 'north'));
console.log(move(1, 'west'));

// The same for numbers and booleans.
type Dice = 1 | 2 | 3 | 4 | 5 | 6;
type Strict = true;

function roll(value: Dice): string {
  return `rolled ${value}`;
}

console.log(roll(6));

const mustBeTrue: Strict = true;
console.log(mustBeTrue);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28// Each member has a `kind`, and each `kind` is a different literal type.
type Shape =
  | { kind: 'circle'; radius: number }
  | { kind: 'rectangle'; width: number; height: number }
  | { kind: 'triangle'; base: number; height: number };

function area(shape: Shape): number {
  // Checking `kind` tells the compiler which member this is. Inside each
  // branch, the properties of that member are available and the others are not.
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2;
    case 'rectangle':
      return shape.width * shape.height;
    case 'triangle':
      return (shape.base * shape.height) / 2;
  }
}

const shapes: Shape[] = [
  { kind: 'circle', radius: 1 },
  { kind: 'rectangle', width: 3, height: 4 },
  { kind: 'triangle', base: 6, height: 2 },
];

for (const shape of shapes) {
  console.log(shape.kind.padEnd(10), area(shape).toFixed(2));
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32type Shape =
  | { kind: 'circle'; radius: number }
  | { kind: 'rectangle'; width: number; height: number };

function area(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2;
    case 'rectangle':
      return shape.width * shape.height;
    default:
      // If every case above is handled, `shape` here has type never, and
      // assigning it to a never variable is fine. Miss a case and this line
      // becomes an error naming the type you forgot.
      return assertNever(shape);
  }
}

function assertNever(value: never): never {
  throw new Error(`Unhandled variant: ${JSON.stringify(value)}`);
}

console.log(area({ kind: 'circle', radius: 2 }).toFixed(2));
console.log(area({ kind: 'rectangle', width: 2, height: 5 }));

// And it defends the boundary too: bad data from outside still throws here
// rather than returning undefined silently.
try {
  area({ kind: 'hexagon', side: 1 } as unknown as Shape);
} catch (err) {
  console.log('caught:', (err as Error).message);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19type Result<T> =
  | { ok: true; value: T }
  | { ok: false; error: string };

function parseAge(input: string): Result<number> {
  const n = Number(input);
  if (Number.isNaN(n)) return { ok: false, error: `not a number: "${input}"` };
  if (n < 0) return { ok: false, error: 'age cannot be negative' };
  if (!Number.isInteger(n)) return { ok: false, error: 'age must be whole' };
  return { ok: true, value: n };
}

for (const input of ['42', 'abc', '-1', '3.5']) {
  const result = parseAge(input);
  // The compiler will not let you touch .value without checking .ok first,
  // which is the entire point.
  if (result.ok) console.log(`${input.padEnd(5)} -> ${result.value}`);
  else console.log(`${input.padEnd(5)} -> failed: ${result.error}`);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16// An array whose elements are each either a string or a number.
type Mixed = (string | number)[];

// Either an array of strings, or an array of numbers, but not a mixture.
type Either = string[] | number[];

const mixed: Mixed = ['a', 1, 'b', 2];
const strings: Either = ['a', 'b'];
const numbers: Either = [1, 2];

console.log(mixed);
console.log(strings, numbers);

// The distinction is real: pushing a number into `Either` when it holds
// strings would be wrong, and the compiler treats the two very differently.
console.log('mixed length:', mixed.length);

1
2
3
4
5
6
7
8
9
10
11type Level = 'debug' | 'info' | 'error';

function log(level: Level, message: string): string {
  return `[${level.toUpperCase()}] ${message}`;
}

console.log(log('info', 'started'));
console.log(log('error', 'stopped'));

// Look at the compiled output: the type is gone entirely and these are plain
// strings. Compare that with what an enum emits, in lesson 14.

1
2
3
4
5
6
7
8function log(level, message) {
    return `[${level.toUpperCase()}] ${message}`;
}
console.log(log('info', 'started'));
console.log(log('error', 'stopped'));

// Look at the compiled output: the type is gone entirely and these are plain
// strings. Compare that with what an enum emits, in lesson 14.