Typescript type annotation [Complete tutorial]

SharePoint Online training courses

In this typescript tutorial, we will see what is type annotation in typescript. Also, we will see how we can use type annotation in Typescript.

Here we will cover the below topics:

  • What is type annotation in Typescript?
  • Why use type annotation in Typescript.
  • Typescript type annotations for functions
  • Typescript type annotation arrow function
  • Typescript type annotation array
  • Typescript type annotation for loop
  • Typescript type annotation for object

What is Type annotation in typescript?

To clearly indicate the kinds of identifiers like variables, functions, objects, etc. in TypeScript, type annotations are used.

To define the typescript, after an identifier as the type annotation we can specify :Type, so type can be any valid type.

Once an identifier has been annotated with a type in typescript, it can only be used as that type. The Typescript compiler will generate an error if the identifier is used as a different type.

TypeScript supports all of JavaScript’s primitive types, including integer, string, and boolean.

Example of type annotation

var num: number=50;
var ename: string= "alex";
var isValid:boolean= true;

You can see in the above example, that each variable is declared with the data type, these are the typescript type annotation.

We cannot modify the value of a variable by using a data type other than the stated data type. If you attempt, the TypeScript compiler will generate an error. This aids in the spotting of JavaScript problems. In the above example, assigning a string to a variable age or a number to name results in an error.

Read Typescript Identifiers and Keywords

Use type annotation in Typescript

Here we will see why we need to use type annotation in Typescript.

Type annotations are used to ensure that code is type-checked. Type annotations are optional in TypeScript.

However, type annotations assist the compiler in verifying types and avoiding data type mistakes. It is also an excellent method to write code for future developers working on your code to make it easier to read and maintain.

Typescript type annotation
Typescript type annotation

Typescript type annotations for functions

Here we will see how we can use typescript type annotations for functions.

In JavaScript, functions are the essential building blocks of every application. They are used to create levels of abstraction by imitating classes, information hiding, and modules.

While there are classes, namespaces, and modules in TypeScript, functions are still the primary means of specifying how to accomplish things.

TypeScript additionally extends the regular JavaScript functions with extra features to make them easier to use.

In Typescript or Javascript, we can create both anonymous functions and named functions.

Defining named function in javascript:

function sub(a,b){
return a-b;
}

Defining an anonymous function in javascript:

let mySub= function(a,b){
return a-b;
}

Now we will see how to add typescript type annotation in the above javascript example.

Define named function with typescript function type annotations:

function sub (a: number, b:number){
return a-b;
}

Define an anonymous function with typescript function type annotations:

let mySub=function (a= number, b= number){
return a-b;
}

Read TypeScript Enum

Typescript type annotation arrow function

Here we will see how to define typescript type annotations arrow functions/fat arrow functions.

Arrow function with parameters

Anonymous functions, i.e. function expressions, are represented by fat arrow/ Arrow function notations. In other languages, they are known as lambda functions.

Syntax arrow function/ Fat arrow function

(param1, param2, param3......paramN)=> expression

We can eliminate, the need of using of function keywords, by using the arrow function/ fat arrow function. In this paranthesis, parameters are passed, and within the curly brackets the function expression is enclosed.

Let’s see how we can use arrow function in javascript:

let sub =(a, b)=>{
return a-b;
}

Now lets see how we can use typescript type annotation arrow function in the above example.

let sub= ( a: number , b: number) : number =>{
return x-y;
} // (10,5), output= 5

Here, sub is an arrow function/fat arrow,(a: number, b: number) denotes the parameter types in typescript, i.e. :number, specifies the return type. The fat arrow => denotes the boundary between the function parameters and the function body. One or more code statements can be found on the right side of =>.

Arrow function without parameters

The arrow function without parameter we can define like below:

let str =() => console.log("Hello Typescript annotation")
str(); // Hello Typescript annotation

Arrow function in class

Let’s see, how we can use typescript type annotation fat arrow/arrow function in class.

 class Product {
  productNum: number;
  productName: string;

  constructor(id: number, name: string) {
      this.productName = name;
      this.productNum = id;
  }

  display = () => console.log(this.productNum +' ' + this.productName)
}
let prod = new Product(1, 'ipod');
prod.display(); // output= 1 ipod

Read TypeScript Set and Weakset

Typescript type annotation array

Here we will see how to define typescript type annotation in an array.

An ordered list of data is an Array in typescript. To create an array that contains values of a specific types. The syntax to define typescript type annotation array:

let array= type[]

For example, we will create an array of names

let names: string[] = ['Alex', 'John'];
console.log(names)

The output will be:

[ 'Alex', 'John' ]

Typescript type annotation for loop

Here we will see how we can use typescript type annotation for a loop.

Typescript supports the following for loops:

  • for loop
  • for..of loop
  • for..in loop

We will use for loop and for..in loop to show how we can use type annotation with typescript.

for loop in typescript annotation

The for loop is used to run a block of code a certain number of times, as determined by a condition.

Syntax:

for(intialization; condition; increment/decrement){
//block of statement to be executed
}

In the below example, we will run the first expression(initialization), before the loop started. The second expression (condition) is executed to execute the loop. Then third expression(increment/decrement) is executed after each block of code.

for(let j: number=0; j<5; j++){
console.log(" statement execution number: " +j);
}
//output
//   statement execution number: 0
//  statement execution number: 1
//  statement execution number: 2
//  statement execution number: 3
//  statement execution number: 4

for..in loop typescript annotation

For…in is another variation of the for loop. This may be applied to a list, array, or tuple. With each iteration of a list or collection, the for…in loop produces an index.

example of for..in loop with array

Below you can see an example of for..in loop is applied on an array of numbers:

var array:number[] = [10, 65, 73, 26, 44]
 
for(var item in array){
    console.log(array[item])
}
//output
// 10
//65
// 73
// 26
//44

Read TypeScript Map

Typescript type annotation for object

Here we will see how to add typescript type annotations for object

We will encounter the ‘object type’ is the most common type in typescript. This refers to any JavaScript value with properties, which is almost all of them! To define an object type, we simply list its properties and their types.

Here you can see an example of typescript object type annotation for object. 

function employee(obj: { x: string; y: string }) {
  console.log("The employee x name is " + obj.x);
  console.log("The employee y name is " + obj.y);
}
employee({ x: "Alex", y: "John" });

The output will be like below:

The employee x name is Alex
The employee y name is John

Conclusion

This spfx tutorial, we saw how we can define typescript type annotation in javascript code, which helps the developer in type checking. Here are the below topics we covered:

  • What is type annotation in Typescript?
  • Why use type annotation in Typescript.
  • Typescript type annotations for functions
  • Typescript type annotation arrow function
  • Typescript type annotation array
  • Typescript type annotation for loop
  • Typescript type annotation for object

You may also like the following typescript tutorials:

>