The compiler transpiles TypeScript to JavaScript. It does the following transformations on your source code:

We can see the preceding three transformations in action in the next example:

enum Direction { 
  Left, 
  Right, 
  Up, 
  Down 
} 
let x: Direction = Direction.Left; 

TypeScript compiles this to the following:

var Direction; 
(function (Direction) { 
    Direction[Direction["Left"] = 0] = "Left"; 
    Direction[Direction["Right"] = 1] = "Right"; 
    Direction[Direction["Up"] = 2] = "Up"; 
    Direction[Direction["Down"] = 3] = "Down"; 
})(Direction || (Direction = {})); 
var x = Direction.Left; 

In the last line, you can see that the type annotation was removed. You can also see that let was replaced by var, since let is not supported in older versions of JavaScript. The enum declaration, which is not standard JavaScript, was transpiled to normal JavaScript.

The most important feature of TypeScript is type checking. For instance, for the following code, it will report that you cannot assign a number to a string:

let x: string = 4; 

In the next sections, you will learn the new features of the latest JavaScript versions. Afterward, we will discuss the basics of the type checker.

ES2015 has introduced let and const. These keywords are alternatives to var. These prevent issues with scoping, as let and const are block scoped instead of function scoped. You can use such variables only within the block in which they were created. It is not allowed to use such variables outside of that block or before its definition. The following example illustrates some dangerous behavior that could be prevented with let and const:

alert(x.substring(1, 2)); 
var x = "lorem"; 
for (var i = 0; i < 10; i++) { 
  setTimeout(function() { 
    alert(i); 
  }, 10 * i); 
} 

The first two lines give no error, as a variable declared with var can be used before its definition. With let or const, you will get an error, as expected.

The second part shows 10 message boxes saying 10. We would expect 10 messages saying 0, 1, 2, and so on up to 9. But, when the callback is executed and alert is called, i is already 10, so you see 10 messages saying 10.

When you change the var keywords to let, you will get an error in the first line and the messages work as expected. The variable i is bound to the loop body. For each iteration, it will have a different value. The for loop is transpiled as follows:

var _loop_1 = function(i) { 
    setTimeout(function () { 
        alert(i); 
    }, 10 * i); 
}; 
for (var i = 0; i < 10; i++) { 
    _loop_1(i); 
} 

A variable declared with const cannot be reassigned, and a variable with let can be reassigned. If you reassign a const variable, you get a compile error.

As of ES2015, you can create classes easily. In older versions, you could simulate classes to a certain extent. TypeScript transpiles a class declaration to the old way to simulate a class:

class Person { 
  age: number; 
   
  constructor(public name: string) { 
     
  } 
   
  greet() { 
    console.log("Hello, " + this.name); 
  } 
} 
 
const person = new Person("World"); 
person.age = 35; 
person.greet(); 

This example is transpiled to the following:

var Person = (function () { 
    function Person(name) { 
        this.name = name; 
    } 
    Person.prototype.greet = function () { 
        console.log("Hello, " + this.name); 
    }; 
    return Person; 
}()); 
var person = new Person("World"); 
person.age = 35; 
person.greet(); 

When you prefix an argument of the constructor with public or private, it is added as a property of the class. Other properties must be declared in the body of the class. This is not per the JavaScript specification, but needed with TypeScript for type information.

ES6 introduced a new way to create functions. Arrow functions are function expressions defined using =>. Such function looks like the following:

(x: number, y: boolean): string => { 
  statements 
} 

The function expression starts with an argument list, followed by an optional return type, the arrow (=>), and then a block with statements. If the function has only one argument without type annotation and no return type annotation, you may omit the parenthesis: x => { ... }. If the body contains only one return statement, without any other statements, you can simplify it to (x: number, y: number) => expression. A function with one argument and only a return statement can be simplified to x => expression.

Besides the short syntax, arrow functions have one other major difference with normal functions. Arrow functions share the value of this and the position where it was defined; this is lexically bound. Previously, you would store the value of this in a variable called _this or self, or you would fix the value using .bind(this). With arrow functions, that is not required any more.

It is possible to add a default value to an argument:

function sum(a = 0, b = 0, c = 0) { 
  return a + b + c; 
} 
sum(10, 5); 

When you call this function with less than three arguments, it will set the other arguments to 0. TypeScript will automatically infer the types of a, b, and c based on their default values, so you do not have to add a type annotation there.

You can also define an optional argument without a default value: function a(x?: number) {}. The argument will then be undefined when it is not provided. This is not standard JavaScript, but only available in TypeScript.

The sum function can be defined even better, with a rest argument. At the end of a function, you can add a rest argument:

function sum(...xs: number[]) { 
  let total = 0; 
  for (let i = 0; i < xs.length; i++) total += xs[i]; 
  return total; 
} 
sum(10, 5, 2, 1); 

It is easier to create arrays in ES6. You can create an array literal (with brackets), in which you use another array. In the following example, you can see how you can add an item to a list and how you can concatenate two lists:

const a = [0, 1, 2]; 
const b = [...a, 3]; 
const c = [...a, ...b]; 

A similar feature for object literals will probably be added to JavaScript too.

With destructuring, you can easily create variables for properties of an object or elements of an array:

const a = { x: 1, y: 2, z: 3 }; 
const b = [4, 5, 6]; 
 
const { x, y, z } = a; 
const [u, v, w] = b; 

The preceding is transpiled to the following:

var a = { x: 1, y: 2, z: 3 }; 
var b = [4, 5, 6]; 
 
var x = a.x, y = a.y, z = a.z; 
var u = b[0], v = b[1], w = b[2]; 

You can use destructing in an assignment, variable declaration, or argument of a function header.

With template strings, you can easily create a string with expressions in it. If you would write "Hello, " + name + "!", you can now write Hello ${ name }!.

ES2015 has introduced some new classes, including Map, Set, WeakMap, WeakSet, and Promise. In modern browsers, these classes are already available. For other environments, TypeScript does not automatically add a fallback for these classes. Instead, you should use a polyfill, such as es6-shim. Most browsers already support these classes, so in most cases, you do not need a polyfill. You can find information on browser support at http://caniuse.com.

TypeScript has several primitive types, which are listed in the following table:

let x: boolean = true;   

let x: string = "foo";   

let x: number = 42;   
let y: number = NaN;   

let x: "foo" = "foo";   

function a(): void { }   

let x: any = "foo";   
let y: any = true;   

You can define your own types in various ways:

let x: {   
  a: boolean,   
  b: string,   
  c?: number,   
  [i: number]: string   
};   
x = {   
  a: true, b: "foo" };   
x[0] = "foo";   

let x: string | number;   
x = "foo";   
x = 42;   

let x: { a: string } & { b:   number } = { a: "foo", b: 42 };   

enum E {   
  X,   
  Y = 100   
}   
let a: E = E.X;   

let f: (x: string, y?: boolean)   => number;   
let g: (...xs: number[]) =>   number;   

let x: [string, number];   
X = ["foo", 42];   

By default, undefined and null can be assigned to every type. Thus, the compiler cannot give you a warning when a value can possibly be undefined or null. TypeScript 2.0 has introduced a new mode, called strictNullChecks, which adds two new types: undefined and null. With that mode, you do get warnings in such cases. We will discover that mode in Chapter 6, Advanced Programming in TypeScript.

TypeScript can infer some types. This means that the TypeScript compiler knows the type, without a type annotation. If a type cannot be inferred, it will default to any. In such a case, or in case the inferred type is not correct, you have to specify the types yourself. The common declarations that you can annotate are given in the following table:

let a: number;   
let b = 1;   

function a(x: number) {}   
function b(x = 1) {}   
[1, 2].map(   
  x => x * 2   
);   

function a(): number { }   
(): number => { }   
function c() {   
  return 1;   
}   

class A {   
  x: number;   
  y = 0;   
}   

interface A {   
  x: number;   
}   

You can set the compiler option noImplicitAny to get compiler errors when a type could not be inferred and falls back to any. It is advised to use that option always, unless you are migrating a JavaScript codebase to TypeScript. You can read about such migration in Chapter 10,Migrate JavaScript to TypeScript.