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 prevents us from accidentally corrupting the program. The Type system helps in bringing JavaScript closer to other strongly typed languages such as Java and C#.

Table of Contents

1. TypeScript vs JavaScript
2. TypeScript Compiler
3. Install TypeScript
4. Run TypeScript

1. 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.

2. 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

2.1. TypeScript 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"
    ]
  }
}

3. Install TypeScript

As TypeScript is only for development purposes, 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 a global module

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

4. 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.

Happy Learning !!