TypeScript in 2 Minutes

How to install Typescript 

Mac

-> sudo npm install -g typescript

Windows:

-> npm install -g typescript

First typescript program:

Create a file named main.ts in directory of your choice. Copy following snippet in your main.ts file.

function sayHello(){
  console.log("Hello World");
}
sayHello();



To compile a typescript file,

-> tsc main.ts

This generates javascript file main.js. So tsc (TypesScriptCompile) converts .ts to .js. Also, even if there are errors in the file, it still tries best to create a js file.

You can run this file using node command,

-> node main.js

Types:

Type script supports following data types:

let a: number;   //declares a variable of type number
let b: string;   //declares a variable of type string
let c: boolean;  //..
let d: any;      //any means you may assign ether number, string or boolean etc.
let e: number[] = [1, 2, 3, 4];

//to create constants
const ColorRed = 0;
const ColorGreen = 1;
const ColorBlue = 2;

//another way to create constants using enum
enum Color(Red=0, Green=1, Blue=2}

// this is a comment.

Features:

1. Strong typing - eg. let a: number; a='some string data';  is not allowed since a is declared as number.
2. Object-oriented - has a lot of object oriented features like, objects, classes, constructors, interfaces etc.
3. Compile time errors - you come to know errors at compile time only which saves run time issues.
4. Great tooling - Tools like code can show compilation errors, intelisence
5. Superset of Javascript - has more features than javascript
6. Compile/transpile  - convert from typescript file to javascript file

Interface:

//export keyword required for using this interface/class in another js file/module.

export interface IPoint{
    void draw();  //only declaration.
}

Class:

export class Point implements IPoint{
   
    x:number;
    y:number;

   void draw(){
      console.log('drawing point...);
      }

}

Constructor:

export class Point{
   
    x:number;
    y:number;

    constructor(x1:number, y1:number){
       this.x = x1;
       this.y = y1;
    }
}

//multiple constructors are not supported, use optional parameters to achieve the same.

Access Modifiers:

export class Point{
   
    constructor(private x:number, private y?:number){
       //this is how you create class member variables with access modifier               //private.
       //y is declared as optional parameter, as with any other language, optional         //param should be the last param.
    }
}

Properties:

Properties can help, when you want to add some basic validations, and want to make fields private or to give read only access to fields. Instead of getter and setter methods you can use properties. Like in below code no setter is given to make the property read only.

export class Point{
   
    constructor(private _x:number){
       //note the difference between property and the member variable _x and X
    }
    
    //created property X to return value _x. You may get error as this is only          //supported in ES6 onwards.  
    get X(){
         return this._x;
    }
}

Import/Export:

To reuse/use a class it must be exported from the file as below in point.ts using export keyword. Same needs to be imported using import keyword as in file square.ts below.

------------

filename: point.ts
---------------------
export class Point{
   
    constructor(private x:number, private y:number){
    }
}

--------------------

filename: square.ts

--------------------

import {Point} from './point'  //import Point class from another file/module

export class Square{
   point1: Point;
}