Typescript

MD Moshiur Rahman
3 min readJun 17, 2021

Typescript learn for the beginner

1. What is Typescript?

  • TypeScript is a superset of JavaScript. This is an open-source language that builds on JavaScript. One of the world’s most used tools, by adding static type definitions.

2. How to work TypeScript?

  • TypeScript work for value type. But this type of check missing JavaScript. Declare and declaration value var or let keyword variable that type, after than any other value not reassign other types in this variable. Because TypeScript guesses this type from the declaration.

Example :

1. let president = "Abdul Hamid";president = 80 //not to reassign number type this is show error
console.log(president)//expect output = Abdul Hamid
president = "Joe Biden" //allow reassign same type declaration
console.log(president) // expect output = Joe Biden
2. let president;
console.log(president)
//TypeScript not to guess type this variable
//expect output = undefine
president = "Abdul Hamid";
console.log(president) //expect output = Abdul Hamid
president = 80;
console.log(president) //expect output = 80

3. Function parameter, array value, object declaration in this case TypeScript…

  • Function parameter declaration time set parameter type. Whenever pass this parameter value other types then typescript show error that parameter.

Example :

1.function summation( a : number, b : number){
return a + b;
}
console.log(summation(5, 7)) // expect output 12
console.log(summation("name", 5))// expect output error
  • Array declaration time array all value is the same type then typescript inclusive array is that type, next time other type value not allow push this array.
  • Union types declaration array first declare that’s its value in this array then declaration value next time push this array.

Example :

1. let friends = ["Sakib", "Rakib", "Mushfiq"];
friends.push(34)//this line error caught typescript because array is string types.
friends.push("Masrafi") //This is allow and push in this array.
2. let friends: (number | string | object | boolean)[] = [];friends.push("Sakib", 20, true, {name: "Rakib", age: 21, Student: true}) //This is allow typescript and this is union types
  • Object declarations times only declare object type then next time mixed types value assign in this object, and explicit types declare in the object then explicit value assigns in this object or other types value assign next time, then typescript throw error.

Example :

1. let person : object;
person = {
name : "Rofiq",
age : 20,
adult : true,
}
person = [1, 3, 5, "string", true] //this array allow object type
2. let person : {
name : string,
age : number,
adult : boolean
}
person = {
name : "Korim",
age : 26,
adult : true}
person = []; //this is not allow for this declaration

4. Dynamic type of typescript

  • When any variable or array or object epically declares “any” type then next time any types value assign in this variable or object and push any types of value in the array. This is allowed in typescript.

Example

1.let a: any;a = "Korim";
a = 57;
//expect output
2. let b: any[] = [];
a.push("string");
a.push(57)
//expect output
3. let person:{
name: any,
cell: any
}
person = {
name : "Moshiur",
cell : +88017******85,
}
//expect output

5. How to use function types?

  • Function declaration times declare any variable Function type then after the only function declares in this variable. Again function parameter declares specially types then next times call this function that expects parameter types. If again declare not required parameter declares then only question “?” mark pass after parameter or declaration times set default value in the parameter. If function did not return value then default return void type.

Example :

1. let mySummation: Function;
mySummitions = (a, b)=> {
return(
a + b
)};
//expect output then call this function
2.const myFunc =( a:string, b:string, c?:string, d:string = "true") => {
return (
`Hello ${a} ${b} ${c}`
)}
myFunc("World", "Bangladesh")
//expect output

6. Type aliases

  • When need many types declaration in one function parameter that before declaring in one common type variable. These is TypeScript type aliases.

Example :

type stringOrNumber = string | number; 
type personType = {name: string; age : number}
1. const Details = (
id : stringOrNumber,
student : personType
) => {
console.log(`Student id id ${id}, Name is ${student.name} and Student age ${student.age}`)
}
2. const sayHello = (user : personType) => {
console.log(`Hello ${user.age > 50 ? "Sir" : "Mr"} {User.name}`)
}

7.

--

--

MD Moshiur Rahman
0 Followers

Frontend Web Developer || React JS