Typescript overview

Today we will discuss some fundamentals of typescript.

What is Typescript?
Type script is nothing but a better way of writing javascript. At this point i am assuming that you are aware of basic of javascript. If you, you must already came across the power of javascript. The only issue with Javascript is that it is hard to structure it well. There are bunch of libraries available like knochout, angular, jquery, react etc. which give different kind of features. but Typescript is not just another library, instead it is wrapper around javascript with some set of rules within, which helps programmer to write javascript code in a neat and better manner.

Why do we need it?
In order to understand the need of typescript, lets think what is not doable or difficult to do in javascript -
Contract/Interface, class, inheritance these concepts are very common in programming, but these are not directly supported by javascript. If you think building a heavy javascript app(which is very common with modern browsers), it is very important and necessary to have these features available.
Typescript is something which give us strong"Types" in javascript and help us get rid of duck typing(if required). Class, interface, encapsulation, modules, strong types are in built in TypeScript.

How to use Typescript?
Typescript is required a compiler. It comes with Visualstudio 2015 by default, but we can also download and install it as a separate plugin.
Typescript code is written in ".ts" file. Once compiled, we get equivalent ".js" file. we can write any javascript code in .ts file as well, because every javascript is a valid typescript.
on the actual page we include the generated .js file.

Defining variable in Typescript -
var str : string;
var num : number;
var obj : object;
var dontknow : any;
var func : (args:any)=> any // func of type function taking input of type any and returning type any.
var bl : boolean;
var strArr : string[];

Modules in Typescript -
using module in typescript we can create namespacing and we should always create a namespace before writing any code in javascript.
typescript code -
module a.b.c {
    var a: string;
}

translate into javascript -
var a;
(function (a_1) {
    var b;
    (function (b) {
        var c;
        (function (c) {
            var a;
        })(c = b.c || (b.c = {}));
    })(b = a_1.b || (a_1.b = {}));
})(a || (a = {}));

Class and interface  -
Typescript supports classes and interfaces.
- we can define method as well as variables in interface, which help us creating type/model in javascript. An interface can have just variable, and no method also.
- In order to import any interface/class from other namespace, we can use "import" keyword.
- use "implements" keyword to implement an interface.
- use "export" key word to expose the given interface outside module.
- use public method to expose the method, or we can make methods and variables as private as well.
- there is no javascript generated for interface ,as it is only for type safety during compile time.

Following is example of typescript -
myInterface defines 1 method and 1 variable in it.
Class myClass implement myInterface and hence expose this variable and method.
we can control accessibility by private, public specifiers.

module a.b.c {
    import contract = a.b.Contract;

    class myClass implements contract.myInterface{
        public myvar: number;

        public mymethod(input1: string): number {
            return this.myvar;
        }
    }
}

module a.b.Contract {
    export interface myInterface {
        myvar: number;
        mymethod(input1: string): number;
    }
}

Javascript code -
var a;
(function (a) {
    var b;
    (function (b) {
        var c;
        (function (c) {
            var myClass = (function () {
                function myClass() {
                }
                myClass.prototype.mymethod = function (input1) {
                    return this.myvar;
                };
                return myClass;
            })();
        })(c = b.c || (b.c = {}));
    })(b = a.b || (a.b = {}));
})(a || (a = {}));

Including other libraries - 
As we know there are bunch of libraries available in javascript, how do we plug those in our typescript code?
Well every lib (or most of them) do expose a "type definition" for typescript(.d.ts). WE need to include that in our project and refer to that type definition file in our code to take advantage of it. Using this type definition file, we can refer to all APIs exposed by the lib and can write our code in typescript.
Example - say abc is a library and exposing a type definition file -
/// <reference path="abc.d.ts" />
using reference we included it in our code and can refer all the APIs within.