Generics

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19// Option 1: pick a type, and write the function again for every other type.
function firstNumber(values: number[]): number | undefined {
  return values[0];
}
function firstString(values: string[]): string | undefined {
  return values[0];
}

console.log(firstNumber([1, 2]), firstString(['a', 'b']));

// Option 2: accept anything, and lose all knowledge of what came back.
function firstAny(values: any[]): any {
  return values[0];
}

const value = firstAny([1, 2]);
// `value` is any, so the compiler will let you do anything to it, including
// things that will throw. This compiles and crashes.
console.log('any lets this through:', typeof value.toUpperCase);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15// <T> declares a type parameter. The caller supplies it, usually implicitly.
function first<T>(values: T[]): T | undefined {
  return values[0];
}

// The compiler infers T from the argument each time.
const n = first([1, 2, 3]);        // T is number, so this is number | undefined
const s = first(['a', 'b']);       // T is string
const o = first([{ id: 1 }]);      // T is { id: number }

console.log(n ?? 'none', s ?? 'none', o?.id ?? 'none');

// And the connection between input and output is preserved, so mistakes are
// still caught.
console.log(s?.toUpperCase() ?? 'none');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19function wrap<T>(value: T): { value: T; at: number } {
  return { value, at: Date.now() };
}

// Inferred from the argument. This is the normal case.
console.log(wrap(42).value + 1);
console.log(wrap('text').value.toUpperCase());

// Explicit, when there is nothing to infer from.
const empty = first<string>([]);
console.log('explicit on an empty array:', empty ?? 'none');

// Explicit, when you want something wider than the inference would give.
const widened = wrap<string | number>('text');
console.log('widened:', widened.value);

function first<T>(values: T[]): T | undefined {
  return values[0];
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21// A pair, where the two halves are independent types.
function pair<A, B>(a: A, b: B): [A, B] {
  return [a, b];
}

const p = pair('count', 42);
console.log(p[0].toUpperCase(), p[1].toFixed(0));

// A map function, which is where the pay-off is clearest: the callback's
// return type determines the array's element type.
function mapArray<In, Out>(values: In[], transform: (value: In) => Out): Out[] {
  const out: Out[] = [];
  for (const value of values) out.push(transform(value));
  return out;
}

const lengths = mapArray(['a', 'bb', 'ccc'], (s) => s.length);
const labels = mapArray([1, 2], (n) => `#${n}`);

console.log(lengths.reduce((a, b) => a + b, 0));
console.log(labels.join(' '));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21interface Response<Body = string> {
  status: number;
  body: Body;
}

// Uses the default.
const text: Response = { status: 200, body: 'ok' };

// Overrides it.
const json: Response<{ id: number }> = { status: 201, body: { id: 7 } };

console.log(text.body.toUpperCase());
console.log(json.body.id);

// Defaults are useful on functions too, though less often needed.
function collect<T = string>(...items: T[]): T[] {
  return items;
}

console.log(collect('a', 'b'));
console.log(collect<number>(1, 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
27type Result<T, E = string> =
  | { ok: true; value: T }
  | { ok: false; error: E };

function parseNumber(input: string): Result<number> {
  const n = Number(input);
  return Number.isNaN(n) ? { ok: false, error: `not a number: ${input}` } : { ok: true, value: n };
}

interface ValidationError {
  field: string;
  message: string;
}

function parseAge(input: string): Result<number, ValidationError> {
  const n = Number(input);
  if (Number.isNaN(n)) return { ok: false, error: { field: 'age', message: 'not a number' } };
  if (n < 0) return { ok: false, error: { field: 'age', message: 'must not be negative' } };
  return { ok: true, value: n };
}

const a = parseNumber('42');
console.log(a.ok ? a.value + 1 : a.error);

const b = parseAge('-1');
// The error type is different here, and the compiler knows which is which.
console.log(b.ok ? b.value : `${b.error.field}: ${b.error.message}`);

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72class Heap<T> {
  private items: T[] = [];
  private compare: (a: T, b: T) => number;

  constructor(compare: (a: T, b: T) => number) {
    this.compare = compare;
  }

  get size(): number {
    return this.items.length;
  }

  peek(): T | undefined {
    return this.items[0];
  }

  push(value: T): void {
    this.items.push(value);
    let i = this.items.length - 1;
    while (i > 0) {
      const parent = (i - 1) >> 1;
      // The ! here is honest: the loop bounds guarantee both indices exist,
      // and the compiler cannot see that. Lesson 07 covers why.
      if (this.compare(this.items[parent]!, this.items[i]!) <= 0) break;
      [this.items[parent], this.items[i]] = [this.items[i]!, this.items[parent]!];
      i = parent;
    }
  }

  pop(): T | undefined {
    if (this.items.length === 0) return undefined;
    const top = this.items[0]!;
    const last = this.items.pop()!;

    if (this.items.length > 0) {
      this.items[0] = last;
      let i = 0;
      for (;;) {
        const left = 2 * i + 1;
        const right = left + 1;
        let best = i;
        if (left < this.items.length && this.compare(this.items[left]!, this.items[best]!) < 0) best = left;
        if (right < this.items.length && this.compare(this.items[right]!, this.items[best]!) < 0) best = right;
        if (best === i) break;
        [this.items[best], this.items[i]] = [this.items[i]!, this.items[best]!];
        i = best;
      }
    }
    return top;
  }
}

// Numbers.
const numbers = new Heap<number>((a, b) => a - b);
for (const n of [5, 1, 4, 1, 9, 2]) numbers.push(n);
const drained: number[] = [];
while (numbers.size > 0) drained.push(numbers.pop()!);
console.log('sorted:', drained);

// Objects, with a comparator on a field. T is inferred from the comparator.
interface Task {
  name: string;
  priority: number;
}

const tasks = new Heap<Task>((a, b) => a.priority - b.priority);
tasks.push({ name: 'deploy', priority: 3 });
tasks.push({ name: 'fix build', priority: 1 });
tasks.push({ name: 'review', priority: 2 });

console.log('most urgent:', tasks.peek()?.name);
console.log('order:', [tasks.pop()?.name, tasks.pop()?.name, tasks.pop()?.name]);

1
2
3
4
5
6
7
8
9
10
11
12
13
14// "T, whatever it is, has a numeric length property."
function longest<T extends { length: number }>(a: T, b: T): T {
  return a.length >= b.length ? a : b;
}

// Works for anything with a length, and returns the specific type given.
console.log(longest('alpha', 'be'));
console.log(longest([1, 2, 3], [1]));

// And the return type is the input type, not the constraint, so this is fine.
console.log(longest('alpha', 'be').toUpperCase());

// A number has no length, so it is rejected at the call site.
console.log(longest({ length: 5, label: 'a' }, { length: 2, label: 'b' }).label);

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
32
33
34// Used once, in the parameter position. This is just `unknown`, spelled
// obscurely — and worse, it silently accepts anything.
function logIt<T>(value: T): void {
  console.log('logged:', value);
}

// What it should have been.
function logItBetter(value: unknown): void {
  console.log('logged:', value);
}

logIt(1);
logItBetter(1);

// Used once, and immediately discarded. The <T> achieves nothing at all.
function countOf<T>(values: T[]): number {
  return values.length;
}
function countOfBetter(values: readonly unknown[]): number {
  return values.length;
}

console.log(countOf([1, 2]), countOfBetter([1, 2]));

// A constraint that is really just a parameter type. If you never use the
// specific type, do not introduce a name for it.
function nameOf<T extends { name: string }>(item: T): string {
  return item.name;
}
function nameOfBetter(item: { name: string }): string {
  return item.name;
}

console.log(nameOf({ name: 'Ada', extra: 1 }), nameOfBetter({ name: 'Grace' }));

1
2
3
4
5
6
7
8
9
10
11
12
13class Box<T> {
  constructor(private value: T) {}
  get(): T { return this.value; }
  map<U>(transform: (value: T) => U): Box<U> {
    return new Box(transform(this.value));
  }
}

const numberBox = new Box(21);
const stringBox = numberBox.map((n) => `value is ${n * 2}`);

console.log(stringBox.get());
console.log(numberBox.map((n) => n + 1).get());

1
2
3
4
5
6
7
8
9
10
11
12
13
14class Box {
    value;
    constructor(value) {
        this.value = value;
    }
    get() { return this.value; }
    map(transform) {
        return new Box(transform(this.value));
    }
}
const numberBox = new Box(21);
const stringBox = numberBox.map((n) => `value is ${n * 2}`);
console.log(stringBox.get());
console.log(numberBox.map((n) => n + 1).get());