Why TypeScript

Picture a customs border. Every parcel travels with a declaration, a paper that says what is inside. Recipients have their own rules: a china shop accepts only china. The inspector compares the declaration with the recipient's rule before the parcel crosses the border. If books are on their way to a china shop, the mistake is found at the border, not in the shop.

Once all the parcels are checked, the declarations are thrown away. Inside the country nobody reads them again: the check has already happened.

JavaScript has no customs. A parcel is opened only when it reaches its recipient, that is, when the line that uses it runs. Here is a function that shows a price with two digits after the point:

function formatPrice(price) {
    return price.toFixed(2);
}

console.log(formatPrice(100));
console.log(formatPrice("100")); // ✗

TypeError: price.toFixed is not a function

Let's see what happened:

1. formatPrice(100) prints 100.00: a number has the toFixed method.
2. formatPrice("100") receives a string. A string has no toFixed method, and the program stops with an error.
3. A value from a form field on a page reaches the program as a string. If you tried the function only on numbers, the error is seen by the user who fills in the form.

The ✗ mark in a comment flags the line with the error; every example in the course uses it that way.

Checking before the run

TypeScript adds customs to JavaScript. The declarations in the code are types, and the inspector is the compiler tsc, a program that checks the types before the run. Here is the same function in TypeScript:

function formatPrice(price: number): string {
    return price.toFixed(2);
}

console.log(formatPrice(100));
console.log(formatPrice("100")); // ✗

error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

What changed:

• price: number is the recipient's rule: the function accepts only numbers.
• : string after the parentheses promises that the function returns a string.
• The last line passes a string where a number is expected. tsc reports it before the run: "an argument of type string cannot be passed to a parameter of type number".

The notation : number after a name is a type annotation: a declaration that says which values are allowed here. The editor underlines the wrong line as you type, long before a user opens the program.

Static and dynamic typing

Languages differ in when they find out that types do not match.

Dynamic typing

In JavaScript a type belongs to a value, not to a variable. Whether a value has the toFixed method is found out while the program runs, at the moment the line runs. This is dynamic typing. A line the run has never reached has never been checked.

Static typing

TypeScript checks types from the program's text, before the run. This is static typing. The parameter price has a type, and tsc compares every value passed there with it. It reads the whole file and checks every line, even one that runs once a year.

TypeScript is JavaScript with types

TypeScript takes nothing away from JavaScript: it has the same variables, functions, classes and promises. It adds only type annotations and their checking. That is why any JavaScript code is also TypeScript code: they share the syntax, though the check may find errors in such code.

Browsers and Node.js run JavaScript. So after the check tsc turns a TypeScript file into plain JavaScript and removes the types from it, like declarations thrown away after the border. Types work before the run, and while the program runs they are gone.

Here the picture parts ways with real customs. An inspector can open a parcel and look inside, while tsc opens nothing. It reads only the program's text and compares one declaration with another.

How TypeScript differs from JavaScript

Interviewers like to ask this, often as one of the first questions. The answer has four parts:

• TypeScript is JavaScript with type annotations;
• the compiler tsc checks the types from the program's text, before it runs;
• after the check tsc writes plain JavaScript with the types removed;
• any JavaScript code is also TypeScript code.

Key points

• JavaScript learns about a wrong type only when the line with it runs, sometimes in front of a user.
• TypeScript is JavaScript with type annotations such as price: number.
• The compiler tsc checks types before the run, from the program's text: this is static typing.
• After the check tsc writes plain JavaScript without types.