TypeScript Intro

“TypeScript is a typed superset of Javascript. “  

Let’s see what does this line means.  TypeScript is typed; it has the ability to define typed variables. In core javascript, we use “var” to initialize a variable or function. But in TypeScript, we can specify the type (Like- string, number, Boolean, etc.) of it while initializing. TypeScript is also a superset of javascript, that means any javascript code should work properly inside TypeScript. In other words, all Javascript is valid inside TypeScript.  So we can say, it is javascript with some more advanced features.

Ok, now let’s think, we created a web application using TypeScript. If we try to run that in our browser, it will not work as it is not core javascript, so it is not compilable by our browser engine. So to overcome we have something called transpiler, which will compile TypeScript code to core javascript which can get executed in a browser.

Microsoft has created this TypeScript transpiler. It comes with typescript package. So it install TypeScript, open your terminal and run-

>npm install –g typescript

So now typescript is installed. If you now run following, you should see the typescript transpiler version.

>tsc  --version

Now use VSCode editor for coding. It has inbuilt .ts type support.

Well, open your working folder in VSCode and create a file, name it Employee.ts. Yes , the extension will be .ts not .js.  Put the following code in the file-

//Interface

interface IEmployee { //defining interface

    yearOfJoin: number;// interface  property

    loyality : () => number;// interface function

}

//Base Class

class Company { //create class

    constructor(public name: string, public country: string) { //define constructor

                this.name = name;

                this.country = country;

    }

    public Details(details: string) {            

        return ('Company Name:' + this.name + ' Country: ' + this. country + ' Details: ' + details);

    }

}

//Child Class implements IEmployee and inherits from Company

class Employee extends Company implements IEmployee { //create class extend company and implement IEmployee

    firstName: string; // typed variable

    lastName: string;

    yearOfJoin: number;

    //private _company: Company;

    //Constructor           

    constructor(firstName: string, lastName: string, companyName: string, country: string, yearOfJoin: number) {

        super(companyName, country);

        this.firstName = firstName;

        this.lastName = lastName;

        this. yearOfJoin = yearOfJoin;

    }

    loyality () {

        return 2017 - this. yearOfJoin;  // as 2017 is current year

    }

    CompanyDetails() {

        var y = super. Details (' Software Company with CMMI lavel');

        console.log(y);

    }

    printDetails(): void {

        alert(this.firstName + ' ' + this.lastName + ' Company is: ' + this.name);

    }

}

Save the file and run-

>tsc Employee.ts --target ES5 --outDir js --watch

Here we are running typescript transpiler with following arguments –

1.       Typescript files to be compiled.

2.       Compiled to which js version.(ES5/ES6)

3.       What should be the output directory.(js)

4.       Watch the files as mentions in the first argument, and whenever any changes, compile it to js.

Note: for more options execute-  

> tsc –help

After the execution you should see a js folder inside your current folder. And the js folder will contain your compiled .js files form provided .ts files.

See code comments for clear understanding.