Type alias in Typescript

#javascript #typescript

Before delving into Type alias let us look some code:

The code be also be accessed here: https://github.com/abhidatta0/Typescript-for-JS-people

All codes for this blog can be found from src/Basic/_2.ts file

let obj = {x: 0};
obj.bar = 'Hello';

This will show a editor error in TS

Property 'bar' does not exist on type '{ x: number; }';

This is like TS saying "i can see obj has only one property x of type number,but you are changing "bar" which is not a property of obj hence i am going to show error".
But we want to assign bar to obj. For this we have to give a certain type(structure) to obj by writing:

let obj:{x: number, bar?: string}= {x: 0};
obj.bar = 'Hello';

Here, "?" means optional. This will run fine now.

Function types

function greet(name: string){
    console.log('Hello '+name.toUpperCase()+'!');
}

//greet(42);  //throws error

Here, we provide type string to name parameter of greet method.
So we get two advantages:

Autocompletion on only string properties (e.g: .toUpperCase())
TS show error if any parameter type other than string (like number 42) is passed as param.

🚀Tip: If mouse is hovered over greet function defination it shows the full function signature.

Lets see a slightly adavnced version of this

function printCoord(pt:{x:number; y?: number}){
    console.log('The x coordination '+ pt.x);
    console.log('The y coordination '+ pt.y);
    console.log(pt.y?.toFixed);
}

printCoord({x: 3, y: 7});
printCoord({x: 3});

Here pt is a param of object type where y is optional(indicated by ?).Notice we have accessed toFixed of y via optional chaining because there can be certain scenerio where y will be undefined.
(e.g: printCoord({x: 3}) )

I have added similar type examples for Anonymous functions in the github repo (file: src/Basic/_2.ts) here.

Type alias

is a syntax to give particular shape to our variables. Variables can be either of string, object , functions etc.

The above printCoord function defination can be written as:

type Point = {
    x: number;
    y?: number;
};

function printCoord(pt: Point){
    console.log('The x coordination '+ pt.x);
    console.log('The y coordination '+ pt.y);
    console.log(pt.y?.toFixed);
}

printCoord({x: 3, y: 7});
printCoord({x: 3});

Everything is same except the type of pt have been "refactored" to a Type Point. This type Point can now be used for other variable types as well . So this like giving alias to a type!.Hence, type alias.
The code for type alias is here.