TypeScript Tutorial

TypeScript is an open source programming language that is developed and maintained by Microsoft in 2012. TypeScript brings ‘types’ (or datatypes) to JavaScript.

Generally, types check the validity of the supplied values, before they are stored or manipulated by the program. This ensures that the code behaves as expected and prevent you to accidentally corrupt the program. This helps in bringing JavaScript closer to other strongly typed languages such as Java and C#.

In this tutorial, we will learn about TypeScript in detail with all you should know before start working on language.

Table of Contents

TypeScript vs JavaScript
TypeScript Compiler
Install TypeScript
Run TypeScript

TypeScript vs JavaScript

1. TypeScript is the ES6 version of JavaScript + a few other TypeScript only features which Angular needs in order to work.
2. TypeScript is superset of JavaScript. It scales JavaScript with datatype support.
3. Existing JavaScript programs are also valid TypeScript programs.
4. TypeScript supports definition files that can contain type information of existing JavaScript libraries.
5. TypeScript is only for development. To run in browser, it must be converted to either ES6 or ES5 version of JavaScript.

TypeScript Compiler

Browsers don’t support TypeScript. So program sourcecode written in TypeScript must be re-written in supported JavaScript sourcecode. For this, TypeScript distribution comes with TypeScript compiler, named tsc.

The current version of the compiler supports ES 5 by default. TypeScript can compile the sourcecode to any module pattern – AMD, CommonJS, ES 6, SystemJS etc.

As with any npm package, you can install it locally or globally, or both, and compile the TS files by running tsc on the command line.

$ tsc helloworld.ts 	//It compile the file into helloworld.js

Compiler Configuration

TypeScipt compiler options are given in tsconfig.js. A sample config file looks like this:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Install TypeScript

As TypeScript is only for development purpose, and not used in runtime, It should be installed as dev dependency.

$ npm install typescript --save-dev   //As dev dependency

$ npm install typescript -g          //Install as global module

$ npm install typescript@latest -g   //Install latest if you have older version

Run TypeScript

Create a file helloworld.ts in workspace. Add below console log statement in file.

console.log("Welcome to TypeScript !!");

To compile from typescript to javascript, use command tsc filename.

$ tsc helloworld.ts 	//Generates file helloworld.js

To execute file, run using node command.

$ node helloworld.ts 	//Output "Welcome to TypeScript !!"

That’s all for introduction to typescript.

Drop me your questions in comments section.

Happy Learning !!