TypeScript
Issues with JavaScript
- 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. - 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. - 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