Arrays, Tuples and readonly

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16const names: string[] = ['Ada', 'Grace'];
const scores: Array<number> = [10, 8];

// Nested: an array of arrays of numbers.
const grid: number[][] = [
  [1, 2],
  [3, 4],
];

// A union needs brackets, or you get something you did not mean.
const mixed: (string | number)[] = ['a', 1];

console.log(names.join(', '));
console.log(scores.reduce((a, b) => a + b, 0));
console.log(grid.map((row) => row.length));
console.log(mixed);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23const values: number[] = [1, 2, 3];
const empty: number[] = [];

// 1. Check. Most explicit, and forces you to decide what absence means.
const a = values[0];
console.log('checked:', a === undefined ? 'empty' : a * 2);

// 2. Default with ??, when there is a sensible fallback.
const b = values[0] ?? 0;
console.log('defaulted:', b * 2);

// 3. at(), which is honest about its type and handles negative indices.
console.log('last:', values.at(-1) ?? 'none');
console.log('last of empty:', empty.at(-1) ?? 'none');

// 4. Assert, when you have information the compiler cannot have.
//    Here the literal on the line above proves the array is non-empty.
const three = [7, 8, 9];
console.log('asserted:', three[0]! + 1);

// And this is what the assertion costs you when you are wrong: no error,
// just undefined travelling onwards to cause trouble somewhere else.
console.log('wrongly asserted:', empty[0]! ?? 'silently undefined');

1
2
3
4
5
6
7
8
9
10
11const values: number[] = [1, 2, 3];

// Every one of these sees `number`, with no undefined in sight.
for (const value of values) console.log('for-of:', value * 2);

console.log('map:', values.map((v) => v * 2));
console.log('filter:', values.filter((v) => v > 1));
console.log('reduce:', values.reduce((sum, v) => sum + v, 0));

// entries() when you need the index as well.
for (const [i, value] of values.entries()) console.log(i, value);

1
2
3
4
5
6
7
8
9
10
11
12const values: number[] = [1, 2, 3];

// The indexed version, with the assertion the compiler asked for.
let indexed = 0;
for (let i = 0; i < values.length; i++) indexed += values[i]!;

// The version that needed no assertion at all.
let iterated = 0;
for (const value of values) iterated += value;

console.log(indexed, iterated);
console.log('Same answer. The second one did not have to argue.');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20// Exactly two numbers.
type Point = [number, number];

// Mixed types per position.
type Entry = [string, number];

const origin: Point = [0, 0];
const pair: Entry = ['count', 42];

// Destructuring gets the right type for each position.
const [x, y] = origin;
const [key, value] = pair;

console.log(x + y);
console.log(`${key}=${value}`);

// Indexing a tuple is precise, and needs no undefined check, because the
// compiler knows the length.
console.log(origin[0] + origin[1]);
console.log(pair[0].toUpperCase(), pair[1].toFixed(0));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19// The names are purely for readers and editor tooltips. This is still a
// positional tuple, and the names do not become properties.
type Range = [start: number, end: number];

function span(range: Range): number {
  const [start, end] = range;
  return end - start;
}

console.log(span([10, 25]));

// Signatures read much better with names, especially for rest tuples.
function move(...args: [dx: number, dy: number, label?: string]): string {
  const [dx, dy, label] = args;
  return `${label ?? 'move'}: ${dx},${dy}`;
}

console.log(move(1, 2));
console.log(move(1, 2, 'jump'));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18// A third element that may or may not be there.
type Colour = [r: number, g: number, b: number, a?: number];

const opaque: Colour = [255, 0, 0];
const translucent: Colour = [255, 0, 0, 0.5];

console.log(opaque, translucent);
console.log('alpha:', translucent[3] ?? 1);

// A fixed head and a variable tail.
type Command = [name: string, ...args: string[]];

const cmd: Command = ['copy', 'a.txt', 'b.txt'];
const bare: Command = ['list'];

const [name, ...args] = cmd;
console.log(name, args);
console.log(bare[0], bare.slice(1));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17// Two spellings, same meaning.
const fixed: readonly number[] = [1, 2, 3];
const alsoFixed: ReadonlyArray<string> = ['a', 'b'];

// Reading is unaffected.
console.log(fixed.length, fixed[0] ?? 'none');
console.log(alsoFixed.join('-'));

// Non-mutating methods still work, and return mutable arrays.
const doubled = fixed.map((n) => n * 2);
doubled.push(99);
console.log(doubled);

// concat, slice, filter and friends are all fine, because none of them
// modify the original.
console.log(fixed.concat([4]));
console.log(fixed.slice(1));

1
2
3
4
5
6
7
8
9
10function total(values: readonly number[]): number {
  return values.reduce((sum, n) => sum + n, 0);
}

const mutable: number[] = [1, 2, 3];
const frozen: readonly number[] = [4, 5, 6];

// Both are accepted, because the function only promises to read.
console.log(total(mutable));
console.log(total(frozen));

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// Inferred as string[]: a mutable array of general strings.
const loose = ['north', 'south'];

// Inferred as readonly ['north', 'south']: a readonly tuple of literals.
const tight = ['north', 'south'] as const;

console.log(loose, tight);

// That difference matters when the literals are what you needed.
type Direction = 'north' | 'south';

function go(direction: Direction): string {
  return `heading ${direction}`;
}

// tight[0] is the literal 'north', so this is accepted.
console.log(go(tight[0]));

// A neat consequence: as const gives you the union for free.
const LEVELS = ['debug', 'info', 'error'] as const;
type Level = (typeof LEVELS)[number];

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

console.log(log('info', 'ready'));
console.log('the runtime array is still just an array:', LEVELS.join(', '));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17// Inferred as string[]: a mutable array of general strings.
const loose = ['north', 'south'];
// Inferred as readonly ['north', 'south']: a readonly tuple of literals.
const tight = ['north', 'south'];
console.log(loose, tight);
function go(direction) {
    return `heading ${direction}`;
}
// tight[0] is the literal 'north', so this is accepted.
console.log(go(tight[0]));
// A neat consequence: as const gives you the union for free.
const LEVELS = ['debug', 'info', 'error'];
function log(level, message) {
    return `[${level}] ${message}`;
}
console.log(log('info', 'ready'));
console.log('the runtime array is still just an array:', LEVELS.join(', '));

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
26interface User {
  id: number;
  name: string;
  active: boolean;
}

const users: User[] = [
  { id: 1, name: 'Ada', active: true },
  { id: 2, name: 'Grace', active: false },
];

// find returns User | undefined, because it might not find anything. This is
// true regardless of noUncheckedIndexedAccess — it is in the signature.
const found = users.find((u) => u.id === 1);
console.log('found:', found?.name ?? 'nobody');

const missing = users.find((u) => u.id === 99);
console.log('missing:', missing?.name ?? 'nobody');

// filter returns User[], never undefined, because "none matched" is [].
const active = users.filter((u) => u.active);
console.log('active:', active.map((u) => u.name));

// flatMap flattens one level, and the types follow.
const letters = users.flatMap((u) => u.name.split(''));
console.log('letters:', letters.length);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16const maybe: (string | undefined)[] = ['a', undefined, 'b'];

// The compiler reads this predicate, sees that it is purely a type check,
// and narrows the result to string[] on its own.
const definitely: string[] = maybe.filter((v) => v !== undefined);
console.log('inferred:', definitely.map((s) => s.toUpperCase()));

// != null works the same way, and removes both null and undefined.
const messy: (string | null | undefined)[] = ['a', null, undefined, 'b'];
const clean: string[] = messy.filter((v) => v != null);
console.log('!= null: ', clean);

// It even follows a named function, as long as that function is a pure check.
const present = (v: string | undefined) => v !== undefined;
const viaNamed: string[] = maybe.filter(present);
console.log('named:   ', viaNamed);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15const maybe: (string | undefined)[] = ['a', undefined, 'b', ''];

// 1. Write the predicate out explicitly. Lesson 13 covers the `v is T` syntax;
//    this is the escape hatch when your predicate does more than one thing.
const viaPredicate = maybe.filter((v): v is string => v !== undefined && v.length > 0);
console.log('predicate:', viaPredicate);

// 2. flatMap, which drops an element by returning an empty array. No new
//    syntax required, and it reads well for filter-and-transform in one step.
const viaFlatMap = maybe.flatMap((v) => (v ? [v.toUpperCase()] : []));
console.log('flatMap:  ', viaFlatMap);

// 3. Filter first, then apply the rest. Each step is simple enough to infer.
const viaTwoSteps = maybe.filter((v) => v !== undefined).filter((v) => v.length > 0);
console.log('two steps:', viaTwoSteps);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20// Tuple: fine at two elements.
type Coord = [x: number, y: number];
const point: Coord = [3, 4];
console.log('tuple:', point[0], point[1]);

// Tuple: already too much at five.
type BadRow = [string, number, boolean, string, number];
const bad: BadRow = ['Ada', 36, true, 'London', 1815];
console.log('what is index 4 again?', bad[4]);

// Object: obvious, reorderable, and greppable.
interface Person {
  name: string;
  age: number;
  active: boolean;
  city: string;
  born: number;
}
const good: Person = { name: 'Ada', age: 36, active: true, city: 'London', born: 1815 };
console.log('object:', good.born);