Typescript Data Types

In this TypeScript tutorial, we will learn about TypeScripts data types. Data types helps you to write code just like you write in other OOPS languages like C# and Java. Data Types provides strongly typed code.

A strongly typed code means all variables data types are known at compile time. Strongly typed code helps compiler to throw error when it’s see a mismatch of assigned variable values like you cannot assign a string value to a numeric variable.

In addition, data types helps us to write maintainable code and it’s also provides intelligence in IDE.

Below are data types provided by TypeScript:

• Boolean
• Number
• String
• Array
• Tuple
• Enum
• Any
• Void

Type Syntax

First declare a variable like we do in JavaScript and then write colon (:) after the variable name and then write it’s data type.

var booleanVar: boolean;

var numberVar: number;

var stringVar: string;

var numberArrayVar: number[];

var stringArrayVar: string[];

var stringArrayVar1: Array<string>;

var tupleVar: [number, string];

enum Direction { North, West, East, South }
var directionVar: Direction;

var anyVar: any;

function voidFunction(): void { }

var nullVar: null;

var undefinedVar: undefined;

Boolean

This simplest data type in TypeScript is Boolean data type where you can assign only true or false value. Below is the example:

var isLoaded: boolean = true;
var isFound: boolean = false;

Number

Number data type allows you to assign an int and floating values. You can also assign a hex, binary or octal values. Below are the examples:

var foundMembers: number = 99;  //int number
var piValue: number = 3.141592653589793238462643383279502884197169399375105820974944592307816406286; //float number
var redColorCode: number = 0xff0000;    //hex number
var binaryNumber: number = 0b11001100; //binary number
var octalNumber: number = 0o366; //octal number

String

String data type allows you to assign text data to a variable. Below is the example

var str1: string = "Text Data in double quotes";
var str2: string = 'Text Data in single quotes';

You can use either single quotes or double quotes to text data.

Template String

This is used to assinging multiline data to a string variable and it’s provides an easy syntax for using other variable in textual data. 

Template string uses backquote (`) instead of single/double quotes. Below is the example:

var fullName: string = "Sunny Malhotra";
var story: string = `This is one exciting story of ${fullName}.

She lives in UK with its family.`;

In the above code, we have use fullName variable inside the story variable. ${variableName } is the syntax use for embedding variable name in Template Strings.

Array

Array is used for values which are of same type. For example, we have a list of number like [1,2,3,4,5]. When we declare an array type we also specify which type of data we want to store in it.

There are two ways in TypeScript to declare an array. Below is the syntax.

var arr: number[] = [1, 2, 3, 4, 5];
var arr2: Array<string> = ["a", "b", "c", "d", "e"];

Tuple

Array is useful when we have to save values of same type but if we want to save values of different types then Tuple comes into the picture.

In Tuple, we can save an array like collection of different data types like shown below:

var orderItem: [number, string, number];

orderItem = [1, "Mobile", 400.00];

In above example, we declare a orderItem variable with number, string and number data types. In next line, we assign a numeric value first, then string value and then again numeric value.

We must specify values according to data types order.  

Enum

An Enum is a set of friendly names of numeric constants. Below is the syntax:

enum Color { Black, White, Green };
var color: Color = Color.Green;

In TypeScript by default, enum values starts with 0. In the above example, Black has 0 value, White has 1 value, and Green has 2 value.

We can also change each member value like shown below.

enum Color { Black = 2, White = 3, Green = 4 };
var color: Color = Color.Green;
console.log(color);

When we print this enum value in console, it prints enum variable numeric value like in the above example it prints 4 as 4 is the assigned value of Green.

If we want to print enum name instead of number then we can assign it to any string variable and prints it.

var color: Color = Color.Green;

var colorName: string = Color[color];
console.log(colorName); //Green

Any

Any data type is used when we are not sure about the type of data we are using. For example, we are working with some other third party javascript library and a function in library returns some data and we are not sure that return data is int, string, or boolean. So we use Any data type. Below is the example:

var anyValue: any = 4;
anyValue = "String Value";
anyValue = [1, 2];

Void

Void data type is only useful with functions that do not return any value. Below is the example:

function generateReport(): void {
    //code to generate report
}

In generateReport function we don’t expect any value to be returned so we mark this function as void return type.

Summary

Here we discuss about TypeScript data types and their syntax. Do you have any questions regarding datatypes? Kindly ask in comments.