Why TypeScript

The problem TypeScript solves

JavaScript only finds many mistakes when the code runs, sometimes in front of a customer: calling a function with arguments in the wrong order, misspelling a property (user.nmae), or forgetting that a value can be null. In a 200,000-line codebase with 30 developers, these bugs are expensive. TypeScript (made by Microsoft, first released in 2012) adds a type system that checks the code while you write it.

function totalPrice(price: number, qty: number): number {
  return price * qty;
}
totalPrice(499, 2);       // OK
totalPrice('499', 2);     // Error: Argument of type 'string' is not assignable to parameter of type 'number'.
const u = { name: 'Asha' };
u.nmae;                   // Error: Property 'nmae' does not exist. Did you mean 'name'?

How it works

1. You write .ts files (or .tsx for React) with type annotations like : number.
2. The TypeScript compiler, tsc, checks the types and reports errors.
3. It outputs plain .js files with the types removed (this is called type erasure). Browsers and Node run that JavaScript.

Because types are erased, they do NOT exist at run time. TypeScript cannot check data that arrives while the program runs, such as JSON from an API. You still need run-time checks at those boundaries.

Getting started

npm install --save-dev typescript
npx tsc --init          # creates tsconfig.json
npx tsc                 # type-check and compile
npx tsc --noEmit        # only type-check (common in projects that use a bundler)

tsconfig.json holds the settings. The most important one is "strict": true, which turns on the full set of checks, including strictNullChecks (null and undefined must be handled). Always start new projects with strict on; turning it on later is painful.

Type inference: you do not annotate everything

TypeScript works out (infers) types from values. let count = 0 is already a number; writing let count: number = 0 adds nothing. Annotate function parameters, and the return type of important functions; let inference handle most local variables.

let city = 'Pune';     // inferred: string
city = 42;             // Error: Type 'number' is not assignable to type 'string'.
const prices = [10, 20]; // inferred: number[]
const total = prices.reduce((a, b) => a + b, 0); // inferred: number