---

Search posts under Typescript:

---

Data Types in Typescript

How to define different data types in TypeScript?

In previous post, we learnt how to compile TypeScript code.

Like any other programming languages, TypeScript helps us in defining data types for JavaScript. These data types are in line with the JavaScript types.

In this post, we shall learn

• What are different types in TypeScript
• How to declare types in TypeScript

Syntax of declaring variables in TypeScript

The syntax of declaring data type in TypeScript is following.

var <variableName>: <dataType> = <value>;

In above code snippet, var is the keyword and remaining words inside angular brackets are placeholders to keep respective values.

Declaring boolean data type in TypeScript

Boolean data type is used to store true/false type of data. The use of this type is same as the use of boolean data type in other programming languages.

// declare boolean type
var isTrue: boolean = false;

In above code snippet, we have defined isTrue variable of boolean type and initialized this variable with false value.

After compiling above code, we would get following JavaScript output.

Output

// declare boolean type
var isTrue = false;

In above code snippet, we have declared a isTrue variable and set it's value to false.

Declaring Number data type in TypeScript

All numbers in TypeScript are floating points values and it is assigned to 'number'.

// declare number type
var myAge: number = 10;

Above code declares myAge variable with value as 10. Compiling above code will generate below JavaScript code.

Output

// declare number type
var myAge = 10;

Declaring string data type in TypeScript

String is very very popular and most used data type in any application. To store any kind of textual data , we use string data type in TypeScript. The value of string can be stored either using single quote (') or double quote (").

// declare string type
var fullName: string = "Sheo Narayan";
var anoterFullName: string = 'Sheo Narayan Dutta';

Above code generates fullName variable with value as "Sheo Narayan" and anotherFullName variable with value as 'Sheo Narayan Dutta'. Compiling above code generats below JavaScript code.

Output

// declare string type
var fullName = "Sheo Narayan";
var anoterFullName = 'Sheo Narayan Dutta';

Declaring array data type in TypeScript

There are two ways of declaring Array in TypeScript.

1. using []
2. using Array<data type>

// declare array
var ages: number[] = [10, 20, 30];
var names: Array<string> = ["Sheo", "Narayan", "Dutta"];

In the above code snippet, we have declared ages and names array of number and string types respectively. Compiling above code generates below JavaScript code.

Output

// declare array
var ages = [10, 20, 30];
var names = ["Sheo", "Narayan", "Dutta"];

Declaring enum type in TypeScript

Like other programming languages, enum is a ways to give user friendly name to the numerical values. To declare enum in TypeScript we use enum keyword.

Declaring a simple enum

// declaring enum (starts with 0 value)
enum Days { Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday };
var day: Days = Days.Monday; // print 1
alert(day);

In the above code snippet, we have declared Days enumerations with the days name. By default, the value of enum items starts with 0. So in this case, the value of Sunday will be 0, Monday will be 1.

Compiling above code gives following output in JavaScript.

Output

// declaring enum (starts with 0 value)
var Days;
(function (Days) {
    Days[Days["Sunday"] = 0] = "Sunday";
    Days[Days["Monday"] = 1] = "Monday";
    Days[Days["Tuesday"] = 2] = "Tuesday";
    Days[Days["Wednesday"] = 3] = "Wednesday";
    Days[Days["Thursday"] = 4] = "Thursday";
    Days[Days["Friday"] = 5] = "Friday";
    Days[Days["Saturday"] = 6] = "Saturday";
})(Days || (Days = {}));
;
var day = Days.Monday; // print 1
alert(day);

Declaring enum with specific value in TypeScript

To declare enum with start value, simply set the value of the item while declaring the enum like below. (we do the same in other programming langulages like C#).

// declaring enum (starts with 1 value)
enum customDays { Sunday = 1, Monday = 22, Tuesday = 33 };
var thisDay: customDays = customDays.Monday; // print 22
alert(thisDay);

Here the value of Sunday is set to 1 instead of 0 if we would not have set the value of enum items while declaring.

Output

// declaring enum (starts with 1 value)
var customDays;
(function (customDays) {
    customDays[customDays["Sunday"] = 1] = "Sunday";
    customDays[customDays["Monday"] = 22] = "Monday";
    customDays[customDays["Tuesday"] = 33] = "Tuesday";
})(customDays || (customDays = {}));
;
var thisDay = customDays.Monday; // print 22
alert(thisDay);

Declaring enum with start value only in TypeScript

We can declare enum with just start value and remaining items value will be automatically incremented by 1 by TypeScript.

// enum with starting value
enum daysStart { Sunday = 4, Monday, Tuesday };
var dayStart: daysStart = daysStart.Monday; // print 5
alert(dayStart);

Above code snippets, sets Sunday value as 4 so Monday and Tuesday value will be set as 5 and 6 respectively.

Output

// enum with starting value
var daysStart;
(function (daysStart) {
    daysStart[daysStart["Sunday"] = 4] = "Sunday";
    daysStart[daysStart["Monday"] = 5] = "Monday";
    daysStart[daysStart["Tuesday"] = 6] = "Tuesday";
})(daysStart || (daysStart = {}));
;
var dayStart = daysStart.Monday; // print 5
alert(dayStart);

Getting enum item text in TypeScript

Many a times, we may not need the numberical value of the enum but we need the text. To get the text of the enum items we can use it's numberical value as index as shown in the code below.

// getting the enum text using index
enum myDays { Monday = 5, Tuesday, Wednesday };
var myDay: string = myDays[6];
alert(myDay); // print Tuesday 

Compiling above code gives following output

Output

// getting the enum text using index
var myDays;
(function (myDays) {
    myDays[myDays["Monday"] = 5] = "Monday";
    myDays[myDays["Tuesday"] = 6] = "Tuesday";
    myDays[myDays["Wednesday"] = 7] = "Wednesday";
})(myDays || (myDays = {}));
;
var myDay = myDays[6];
alert(myDay); // print Tuesday

Declaring any data type in TypeScript

Many a times, we may not know what type of variable we want to declare. We just want a placeholder where any type of data, based on function return type can be stored. In this scenario, we can use any data type.

Below code declares a variable in which we can store any type of data.

// when we are not sure about the data type we are going to store
var doNotKnow: any = 18;
alert(doNotKnow);
doNotKnow = 'Sheo';
alert(doNotKnow);
doNotKnow = 50;
alert(doNotKnow);

The output of above code snippet would be

Output

// when we are not sure about the data type we are going to store
var doNotKnow = 18;
alert(doNotKnow);
doNotKnow = 'Sheo';
alert(doNotKnow);
doNotKnow = 50;
alert(doNotKnow);

'any' type can also be used to declare an array where we want to store different types of data.

// any type - when we do not know what type of data we are going to get
var list: any[] = [38, "Sheo", "Hyderabad", true];
var city = list[2];
alert(city);

In above code snippet, list is an array whose different element has different types of data.

Output

// any type - when we do not know what type of data we are going to get
var list = [38, "Sheo", "Hyderabad", true];
var city = list[2];
alert(city);

Declaring void type in TypeScript

To declare a function that do not return a value, we can use void type.

// void - when we do not have any return type from a function
function AlertMe(): void {
    alert("Hello, how are you?");
}
AlertMe();

Above code generates below code.

Output

// void - when we do not have any return type from a function
function AlertMe() {
    alert("Hello, how are you?");
}
AlertMe();