TypeScript is a strict syntactical superset of JavaScript. It adds optional static typing to the language.

With TypeScript we can write very understandable and maintainable code just like we do with other statically type languages, for example Java. Also TypeScript type system makes it possible to have very highly-productive development tools, static checking and code refactoring which cannot be possible with JavaScript alone.

TypeScript comes with a compiler which compiles the TypeScript code to JavaScript.

Installing

TypeScript can be downloaded and installed via npm.

c:> npm install -g typescript

After installing:

c:>tsc -v
Version 3.0.1

Writing Typescript

quick-start.ts

function showSquareOf(x: number) {
    console.log(x * x);
}

let myNumber: number = 16;
showSquareOf(myNumber);

The 'number', as we used above, represents decimal type. It is one of the TypeScript types which is used for primitive variables, class instance (objects) variables and functions parameters/returns etc.

The extension of a TypeScript file is '.ts'.

Compiling to Javascript

D:\typescript-quick-start-example>tsc quick-start.ts

That generates following javascript file in the same folder

quick-start.js

function showSquareOf(x) {
    console.log(x * x);
}
var myNumber = 16;
showSquareOf(myNumber);

Running above javascript file via node:

D:\typescript-quick-start-example>node quick-start.js
256

The topmost advantage of TypeScript is compile time type checking by the compiler.

Let's rewrite above example with incompatible types to see how TypeScript warns us about wrong types:

function showSquareOf(x: number) {
    console.log(x * x);
}

let myNumber = "a";
showSquareOf(myNumber);

Let's compile:

D:\typescript-quick-start-example>tsc quick-start2.ts
quick-start2.ts(6,14): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

The compiler still produces the javascript file:

quick-start2.ts

function showSquareOf(x: number) {
    console.log(x * x);
}

let myNumber = "a";
showSquareOf(myNumber);

Running:

D:\typescript-quick-start-example>node quick-start2.js
NaN

To avoid js generation, in case of compiler error, use 'noEmitOnError' flag:

D:\typescript-quick-start-example>tsc --noEmitOnError quick-start2.ts
quick-start2.ts(6,14): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

Check out all compiler options here.

IDE support

Visual Studio Code

Visual Studio Code has TypeScript auto-completion and error highlighting support:

Eclipse

There is an Eclipse plugin for TypeScript. After installing that we have auto-completion and error highlighting support:

JetBrains WebStorm

WebStorm(not free) probably has the best TypeScript support (among other web frameworks support):

Other tools

TypeScript Node

TypeScript Node is a node package, which allows to execute a ts file directly . To install the package

npm install -g ts-node

To execute our quick-start.ts example:

D:\typescript-quick-start-example>ts-node quick-start.ts
256

TypeScript Playground

TypeScript Playground is online tool which compiles TypeScript code to native JavaScript and displays that in real time. It also has code autocompletion support.