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
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.
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.
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;
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';
There are two ways of declaring Array in TypeScript.
// 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"];
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 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);
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);
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);
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
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);
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 functionViews: 18356 | Post Order: 2
function AlertMe() {
alert("Hello, how are you?");
}
AlertMe();