Type Annotations in TypeScript

Typescript uses type annotation to specify the data type of the variable, function or function return value. It uses the syntax :[type], where type is the Typescript type. Once you have annotated an identifier to be of a certain type, you can only use it as that Type. The Typescript compiler throws an error if you use the identifier as a different type.

Table of Content

Using the Type Annotation
Type Annotation in Variable declaration
Examples of Type Annotation
Summary

Using the Type Annotation

We annotate a variable by using a colon (:) followed by its type. There can be a space after the colon. For example, the following shows how to use the type annotation in variable declaration.

Type Annotation in Variable declaration


var message : string = "hello world";       //string
var NumberVar: number = 100;                //number
var BooleanVar : boolean = true;           //boolean
var ArrayVar: string[]                     //arrays

var message : string = "hello world"; //string

var NumberVar: number = 100; //number

var BooleanVar : boolean = true; //boolean

var ArrayVar: string[] //arrays

The keyword after the colon i.e string/number/boolean is a Typescript type. By including a type, we are letting the compiler know the type of the variable. The compiler will throw an error in case we attempt to assign a value different than the specified type.

For Example, this will throw an error


StringVar = NumberVar

StringVar = NumberVar

The types are optional in Typescript. If you do not want to use the types, then annotate it with any as shown below


var StringVar : any= "hello world";      
var NumberVar: any= 100;

var StringVar : any= "hello world";

var NumberVar: any= 100;

Then, the following example will not result in an error


StringVar = NumberVar

StringVar = NumberVar

Examples of Type Annotation

Arrays

The arrays are annotated using the string[] or Array as shown in the example below.


var cities: string[] = ['Delhi', 'New York', 'London'];

//OR

var cities: Array<string> =['Delhi', 'New York', 'London'];

var cities: string[] = ['Delhi', 'New York', 'London'];

//OR

var cities: Array<string> =['Delhi', 'New York', 'London'];

Function arguments & Return Types

Here, the function arguments are annotated with the number data type and so is the return type.


function add(x: number, y: number): number {
  return x + y;
}

function add(x: number, y: number): number {

return x + y;

}

Anonymous Objects

Here, we are creating an object with two properties. The properties are annotated with the type number & string.


var student: { id: number; name: string; }; 
student = { id: 100, name : "Rahul" }

var student: { id: number; name: string; };

student = { id: 100, name : "Rahul" }

Union types

The union types are special. They allow a variable to be of either of two types. In the example, the id can be either a string or a number. The Typescript allows you to perform both string & arithmetic operation on the variable id.


var id: string|number

var id: string|number

Summary

Types are the reason why typescript exits. We annotate a variable, function, function return value, etc to let the compiler know how we intend to use it. we use the syntax :[type], where type is the Typescript datatype.

TypeScript Types

Variables