13. TypeScript I: types as labels

A typo that doesn’t crash

Here is one step of a particle simulation. Find the bug:

function step(p, dt) {
  p.x = p.x + p.vX * dt;
}

const p = { x: 0, y: 0, vx: 2, vy: 1 };
step(p, 0.5);
console.log(p.x); // NaN

It’s vX with a capital X. The object has no property by that name, so p.vX is undefined, undefined * 0.5 is NaN (“not a number”), and NaN plus anything is NaN. There’s no error message. In a real program, a thousand particles quietly turn into NaN, and you find out an hour later, somewhere else.

JavaScript can’t complain, because it has no idea what p is supposed to look like. You know. You just never wrote it down. TypeScript is a way to write it down, so that a program can check it for you.

Labels on names

let count: number = 0;
let name: string = 'Ada';

function mul(a: number, b: number): number {
  return a * b;
}

mul('3', 4);
// error: Argument of type 'string' is not
// assignable to parameter of type 'number'.

A colon and a type after a name is a label. a: number says “a will always hold a number”. The : number after the parameter list labels what the function returns. When a call breaks a label, the checker reports it, with the line and the reason.

You don’t have to label everything. Write let n = 3; and TypeScript works out the label number by itself. Then n = 'three' is an error too: “Type ‘string’ is not assignable to type ‘number’.”

Interfaces: the shape of an object

Numbers and strings are easy to label. For objects, you describe their shape: which properties they have, and what each one holds.

interface Particle {
  x: number;
  y: number;
  vx: number;
  vy: number;
}

function step(p: Particle, dt: number) {
  p.x = p.x + p.vX * dt;
  // error: Property 'vX' does not exist on
  // type 'Particle'. Did you mean 'vx'?
}

There’s the typo from the start of the chapter, caught before the program ever ran. A missing property is caught the same way: writing const q: Particle = { x: 1, y: 2, vx: 0 }; gets “Property ‘vy’ is missing”. Lists are labelled with []: number[] is an array of numbers, and Particle[] is an array of particles.

Where do the types go?

Here’s the surprising part. Step through what happens to a TypeScript file on its way to running:

interface Particle {
  x: number;
  vx: number;
}
function step(p: Particle, dt: number) {
  p.x = p.x + p.vX * dt;
}

The TypeScript compiler, tsc, does two jobs. First it checks the whole file. Then it erases the types and writes out plain JavaScript. Engines only ever run that JavaScript. One more surprise: by default tsc writes the JavaScript even when it found errors, and you have to ask it not to with the --noEmitOnError flag^[1].

Try it: the box below runs exactly what erasure leaves.

// The runner erases types and runs
// what is left. It never checks them.
function add(a, b) {
  return a + b;
}

console.log(add(2, 3));
console.log(add('2', 3));

// Try: write a: number and b: number,
// then run again. Same output! tsc
// would flag add('2', 3) instead.

Labels are promises, not guards

The checker only sees your code. Data arriving from outside the program, like text from a server or a file, was never checked:

const p: Particle = JSON.parse(text);

JSON.parse turns text into an object, and its result has the special type any, which switches checking off. So the checker takes your word that this is a Particle. If the text was {"x": "oops"}, you only find out later, at runtime, as a wrong answer.

At the border, you check by hand. JavaScript’s typeof operator gives the runtime kind of a value as a string: typeof 3 is 'number' and typeof 'hi' is 'string'. One famous oddity: typeof null is 'object'. That’s exactly what this chapter’s exercise needs.

Your turn

interface Particle {
  x: number;
  y: number;
  vx: number;
  vy: number;
}

function isParticle(v: any): boolean {
  // your code here
}

const ok = { x: 0, y: 0, vx: 1, vy: 1 };
console.log(isParticle(ok));

interface Mover {
  x: number;
  vx: number;
}

function totalX(ms: Mover[]): number {
  let t = '0';
  for (const m of ms) {
    t = t + m.x;
  }
  return t;
}

const ms = [
  { x: 1, vx: 0 },
  { x: 2, vx: 0 },
];
console.log(totalX(ms));

What you learned

• TypeScript is JavaScript plus type annotations like x: number, and a checker, tsc.
• Type checking happens before the program runs. Where you leave a label out, TypeScript infers one.
• An interface names an object shape. Any object with that shape fits.
• Type erasure: tsc deletes the types and emits plain JavaScript, so annotations never change behaviour. Engines never see them.
• Types describe your code, not outside data. At the border, check with typeof. This book’s runner erases types but doesn’t check them.

Next: types that say “this or that”, and how the checker follows your ifs.