Type Annotations in TypeScript

TypeScript is a superset of JavaScript that adds optional static typing to the language. This means that TypeScript allows developers to specify the types of variables, function parameters, and function return values. This feature helps to catch errors early in the development process and makes the code more robust.

In TypeScript, type annotations are used to specify the types of variables, function parameters, and function return values. In this tutorial, we will explore different scenarios where type annotations are used in TypeScript and how they can help developers write better code.

Declaring Variables With Type Annotations

Syntax

The syntax to create a variable with a type annotation in TypeScript is as follows −

let variableName: type;

Here, variableName is the variable's name, and type is the type of the variable. Let's take a look at an example −

Example 1

let num1: number = 10;
console.log(num1);

On compiling, it will generate the following JavaScript code −

var num1 = 10;
console.log(num1);

Output

The above code will produce the following output −

10

In the above example, we declared a variable num1 of type number and assigned it a value of 10. The variable's value is then printed to the console using the console.log() function.

Example 2

let Name: string = "John";
console.log("Hello, " + Name);
// Note that I used "Name" instead of just "name"
// "name" wouldn’t work because it is already declared in the lib.dom.d.ts file in the TypeScript library

On compiling, it will generate the following JavaScript code −

var Name = "John";
console.log("Hello, " + Name);
// Note that I used "Name" instead of just "name"
// "name" wouldn’t work because it is already declared in the lib.dom.d.ts file in the TypeScript library

Output

The above code will produce the following output −

Hello, John

In the above example, we declared a variable name of type string and assigned it a value of "John". We then concatenated the variable's value with a string using the + operator and printed the result to the console using the console.log() function.

Function Parameters With Type Annotations

Type annotations can also be used to specify the types of function parameters.

Syntax

The syntax to create a function with type annotations in TypeScript is as follows −

function functionName(parameterName: type): returnType {
   // function body
}

Here, functionName is the name of the function, parameterName is the name of the parameter, type is the type of the parameter. Let's take a look at an example −

Example 1

function add(num1: number, num2: number): number {
   return num1 + num2;
}
console.log(add(2, 3));

On compiling, it will generate the following JavaScript code −

function add(num1, num2) {
   return num1 + num2;
}
console.log(add(2, 3));

Output

The above code will produce the following output −

5

In the above example, we created a function add that takes two parameters of the type number and returns a value of the type number. We then called the function with arguments 2 and 3 and printed the result to the console using the console.log() function.

Example 2

function greet(name: string): string {
   return "Hello, " + name;
}
console.log(greet("John"));

On compiling, it will generate the following JavaScript code −

function greet(name) {
   return "Hello, " + name;
}
console.log(greet("John"));

Output

The above code will produce the following output −

Hello, John

In the above example, we created a function greet that takes one type string parameter and returns a type string value. We then called the function with argument "John", and printed the result to the console using the console.log() function.

Function Return Values With Type Annotations

Type annotations can also be used to specify the types of function return values.

Syntax

The syntax to create a function with a return type annotation in TypeScript is as follows −

function functionName(): returnType {
   // function body
}

Here, functionName is the function's name, and returnType is the type of the value returned by the function. Let's take a look at an example −

Example 1

function getRandomNumber(): number {
   return Math.random();
}
console.log(getRandomNumber());

On compiling, it will generate the following JavaScript code −

function getRandomNumber() {
   return Math.random();
}
console.log(getRandomNumber());

Output

The above code will produce the following output −

0.3822812708614216

In the above example, we created a function getRandomNumber that returns a random number of type number. We then called the function and printed the result to the console using the console.log() function.

Example 2

function getUser(): { name: string, age: number } {
   return { name: "John", age: 30 };
}
console.log(getUser());

On compiling, it will generate the following JavaScript code −

function getUser() {
   return { name: "John", age: 30 };
}
console.log(getUser());

Output

The above code will produce the following output −

{ name: 'John', age: 30 }

In the above example, we created a function getUser that returns an object with two properties name and age. We then called the function and printed the result to the console using the console.log() function.

Type Annotations for Arrays and Objects

Type annotations can also be used to specify the types of arrays and objects in TypeScript.

Syntax

The syntax to create an array or an object with a type annotation in TypeScript is as follows −

let arrayName: type[] = [];
let objectName: { key1: type1, key2: type2, ... } = {};

Here, arrayName is the name of the array, type is the type of the array elements, objectName is the name of the object, key1, key2, etc. are the keys of the object, and type1, type2, etc. are the types of the object properties. Let's take a look at an example −

Example 1

let numbers: number[] = [1, 2, 3, 4, 5];
console.log(numbers);

On compiling, it will generate the following JavaScript code −

var numbers = [1, 2, 3, 4, 5];
console.log(numbers);

Output

The above code will produce the following output −

[ 1, 2, 3, 4, 5 ]

In the above example, we declared array numbers of type number and initialized it with some values. The values of the array are then printed to the console using the console.log() function.

Example 2

let person: { name: string, age: number } = { name: "John", age: 30 };
console.log(person);

On compiling, it will generate the following JavaScript code

var person = { name: "John", age: 30 };
console.log(person);

Output

The above code will produce the following output −

{ name: 'John', age: 30 }

In the above example, we declared an object person with two properties name of type string and age of type number. We then initialized the object with some values and printed the object to the console using the console.log() function.

Conclusion

Type annotations in TypeScript are a powerful feature that can help developers write better code. By specifying the types of variables, function parameters, and function return values, TypeScript can catch errors early in the development process and make the code more robust. In this tutorial, we explored different scenarios where type annotations are used in TypeScript and how they can be used to improve the code.