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.
Top comments (2)
I would wonder if there is an Typescript user who don't know the type keyword :-D :-D π
haha, its really typed(no pun inteded) in the name itself.