TypeScript

Issues with JavaScript

1. Var a = “gaurav”; var a; var a = 1;
   We aren’t definitning what kind of value a is so it becomes difficult for further manipulations. Type safety is an issue.
2. function  sum( var , var b ) { return a + b}
   sum(2 , 3); sum ( 2, 3, 4); both return same thing no error is reported.
   sum(2) also executes only the output is different. This is at runtime. We need to know these things at compile time.
3. var person = {“name” : “”gaurav” }; 
   person.age = 24;
   The next statement dynamically adds this to my object.
   Expectation is it shouldn’t be redefined by this statement – this can be tricky when working in large projects.

Advent of TypeScript 

To address the problem, a language was thought of which could be converted to JS. This process of converting from one language to the other language is called transpilation. 

So essentially all TS code is converted into JS code in dev time and at runtime the JS code is executed.

TypeScript is run using NodeJs which can run the JS code. Node is a JS runtime built on top of Chrome’s V8 JS engine. [using the exe downloaded].

The typescript compiler/transpiler can be installed using 

npm install typescript

which will transpile it into JS.

So, node is used twice.

To compile use the command : tsc [filename].ts

Defining types 

TS uses postfix type annotation for defining the type.

var a : number;

Besides the regular types, there is something called a tuple.

An object that has multiple types in fixed order. 

Var myTuple  : [number, boolean] ;

myTuple = [2, true];

 Type Erasure

During transpilation, the type information which is there in TS is taken off when it is changed to JS. So ,this info will help you only during compile time.

For functions, the same rules are applicable,

However, functions can also set a return type and method parameter types which get taken off.

Implicit Typing

Even if you don’t tell the type of a variable, during assignment it will implicitly understand it during assignment

Var a = 10; (Is assumed a no)

Var a;

a = function () { return “hii”; } //doesn’t use implicit here because it has to be on the same line for that.

Any -> Var a : any; (can take any type of value)

Union -> Var a : number | Boolean ; ( can take only number or boolean)

Error behaviour

In case, there is an issue relating to the incorrect type of value assigned to the variable, it will still compile in JS. This is because the type information doesn’t impact generation of JS. The type info is only for developers help.

Function optional & default param

function ( var a: number , var b ?) – optional param always has to be last

function (var a, var b =2) – default value for b – so it acts as optional as well

Class

There are classes in TypeScript. After compilation, they get transformed to IIFE using the module pattern.

You can have only one constructor because even method overloading is not allowed.

Object orientedness 

There is a super keyword, this keyword, inheritance of classes and interfaces, member visibility etc.

Also a concept of duck typing – so if a structure looks like a duck, quacks like a duck, it is a duck.

In the below example someObj has the same structure as the Person interface so it is assumed as a type of it. Therefore, the compiler doesn’t give any error.

Short notation for constructor

Constructor (private name:string, private age:number) {}

Is equivalent to

private name:string;

private age:number;

Constructor (private name:string, private age:number) {

this. name=name;

this. age = age;

}

To define constants use readonly (equivalent to const in java). This property can be assigned value only during declaration or in constructor.

There are enums too which are converted to functions with an array of values in js.

Export – to use the class in other modules

If you import this class it will run this .ts file