Understanding DataTypes in TypesScript

TypeScript is referred to as optional static type language which means you can ask the compiler to ignore the type of a variable if you want to take the advantage of the dynamic type. This mixing of static and dynamic typing is also available in C# where you can define the static typed using primary datatype and secondary datatype and also you can define the dynamic type using the dynamic keyword.

Just like JavaScript and any such programming or the scripting language, the TypeScript language also provides the set of basic data types to work with different types of data such as numbers, strings, etc. there are some of the data types which are being supported with TypeScript are number, string, enum, boolean, undefined, void, null, any, never, Array and tuple so will discuss most of them in this article.

Here, we will discuss the TypeScript Types which you can use to write your TypeScript code.

Any Type

The Any type is a supertype of all types which represents any JavaScript value. You can assign any type of value to it. The any keyword is used to define Any type in TypeScript.

The Any type is useful when we do not know the type of value (which might come from an API or a 3rd party library) and we want to skip the type-checking on compile time so there won't be any error visible for the data type as it considers all the values same.

any.ts

function ProcessData(x: any, y: any) {
 return x + y;
}

let result: any;
result = ProcessData("Hello ", "Any!"); //Hello Any!
result = ProcessData(2, 3); //5

The compiled JavaScript (ES5) code for the above TypeScript code is given below:

any.js 
function ProcessData(x, y) {
 return x + y;
}
var result;
result = ProcessData("Hello ", "Any!"); //Hello Any!
result = ProcessData(2, 3);

Primitive Types

The primitive types in TypeScript are the Number, Boolean, String, Void, Null, Undefined types, and Enum types.

Number

The Number primitive type is equivalent to JavaScript primitive type number, which represents double precision 64-bit floating-point values. The number keyword is used to define Number type in TypeScript. TypeScript supports decimal, hexadecimal, binary and octal literals, and in addition to the hexadecimal and decimal values, the TypeScript also supports binary and octal types which were introduced back in ECMAScript 2015.

number.ts

let nondecimal: number = 2;
let decimal: number = 2.4;
let hexadecimal: number = 0xf;
let binary: number = 0b100;
let octal: number = 0o7;

The compiled JavaScript (ES5) code for the above TypeScript code is given below:

number.js

var nondecimal = 2;
var decimal = 2.4;
var hexadecimal = 0xf;
var binary = 4;
var octal = 7;

Boolean

The Boolean primitive type is equivalent to JavaScript primitive type boolean which accepts a value that is either true or false. The boolean keyword is used to define a Boolean type in TypeScript.

boolen.ts

let yes: boolean = true;
let no: boolean = false;

The compiled JavaScript (ES5) code for the above TypeScript code is given below:

boolen.js

var yes = true;
var no = false;

String

The String primitive type is equivalent to JavaScript primitive type string and represents the sequence of characters stored as Unicode UTF-16 code units. The string keyword is used to define String type in TypeScript.

Just like JavaScript, TypeScript also uses double quotes (") or single quotes (') to surround string data.

string.ts

let name: string = "Shailendra Chauhan";
let site: string = 'www.gurukulsight.com';

The compiled JavaScript (ES5) code for the above TypeScript code is given below:

string.js

var name = "Shailendra Chauhan";
var site = 'www.gurukulsight.com';

Void

The Void primitive type represents the absence of a value. The void keyword is used to define a Void type in TypeScript but it is not useful because you can only assign null or undefined values to it.

The void type is mostly used as a function return type that does not return a value or as a type argument for a generic class or function.

void.ts

function displayMeassge(): void {
 console.log("Welcome to Gurukulsight!");
}
let unusable: void = undefined;

The compiled JavaScript (ES5) code for the above TypeScript code is given below:

void.js

function displayMeassge() {
 console.log("Welcome to Gurukulsight!");
}
var unusable = undefined;

Null

The Null primitive type is equivalent to JavaScript primitive type null which accepts the one and only value null. The null keyword is used to define Null type in TypeScript but it is not useful because you can only assign a null value to it.

The Null type is a subtype of all types except the undefined type. Hence, you can assign null as a value to all primitive types, object types, union types, and type parameters.

null.ts

let num: number = null;
let bool: boolean = null; 
let str: string = null;
let n: null = null; //not useful, since you can assign only null value

The compiled JavaScript (ES5) code for the above TypeScript code is given below:

null.js

var num = null;
var bool = null;
var str = null;
var n = null;

Undefined

The Undefined primitive type is equivalent to JavaScript primitive type undefined and all uninitialized variables in TypeScript and JavaScript have one and only value that is undefined. The undefined keyword is used to define Undefined type in TypeScript but it is not useful because you can only assign undefined value to it.

The Undefined type is also a subtype of all types. Hence, you can assign undefined as a value to all primitive types, object types, union types, and type parameters.

undefined.ts

let num: number = undefined;
let bool: boolean = undefined;
let str: string = undefined;
let un: undefined = undefined; //not useful, since you can assign only undefined value

The compiled JavaScript (ES5) code for the above TypeScript code is given below:

undefined.js

var num = undefined;
var bool = undefined;
var str = undefined;
var n = undefined;

Symbols

A symbol is a new, primitive data type introduced in ES6 just like number and string. A symbol value is created by calling the Symbol constructor.

symbols1.ts

let s1 = Symbol();
let s2 = Symbol("mySymbol");

Symbols are immutable and unique. When you create two symbols with the same description then they will be unique and immutable. Just like strings, symbols can be used as keys for object properties.

symbols2.js

let s1 = Symbol("mySymbol Description");
let s2 = Symbol("mySymbol Description");
s1 === s2; // false, symbols are unique

Here is the list of some built-in symbols:

1. Symbol.hasInstance

   - Used for determining whether an object is one of the constructor’s instances.

2. Symbol.match

   - Used for matching the regular expression against a string.

3. Symbol.iterator

   - Returns the default iterator for an object and is called by the for-of loop.

4. Symbol.search

   - Returns the index number within a string that matches the regular expression.

5. Symbol.split

   - Splits a string at the indices that match the regular expression.

Enum

An enum is a way to give friendly names to a set of numeric values. The enum keyword is used to define Enum type in TypeScript. By default, the value of the enum’s members starts from 0. But you can change this by setting the value of one of its members.

In TypeScript, there are two types of enums that are supported which are string and number enum where the number enum can be auto incremented whereas the string enum does not support auto incremented values.

enum.ts

enum Courses {TypeScript, Ionic, Angular2, NodeJS};
let tscourse: Courses = Courses.TypeScript;
console.log(tscourse); //0

The compiled JavaScript (ES5) code for the above TypeScript code is given below:

enum.js

var Courses;
(function (Courses) {
 Courses[Courses["TypeScript"] = 0] = "TypeScript";
 Courses[Courses["Ionic"] = 1] = "Ionic";
 Courses[Courses["Angular2"] = 2] = "Angular2";
 Courses[Courses["NodeJS"] = 3] = "NodeJS";
})(Courses || (Courses = {}));
;
var tscourse = Courses.TypeScript;
console.log(tscourse); //0

In the previous example, we can start the enum’s members value from 2 instead of 0.

enum.ts

enum Courses {TypeScript=2, Ionic, Angular2, NodeJS};
let tscourse: Courses = Courses.TypeScript;
console.log(tscourse); //2

The compiled JavaScript (ES5) code for the above TypeScript code is given below:

enum.js

var Courses;
(function (Courses) {
 Courses[Courses["TypeScript"] = 2] = "TypeScript";
 Courses[Courses["Ionic"] = 3] = "Ionic";
 Courses[Courses["Angular2"] = 4] = "Angular2";
 Courses[Courses["NodeJS"] = 5] = "NodeJS";
})(Courses || (Courses = {}));
;
var tscourse = Courses.TypeScript;
console.log(tscourse); //2

An enum type can be assigned to the Number primitive type, and vice versa.

enum.ts

enum Courses { TypeScript = 2, Ionic, Angular2, NodeJS };
let tscourse: Courses = Courses.Ionic;
let c: number = tscourse; //3

The compiled JavaScript (ES5) code for the above TypeScript code is given below:

enum.js

var Courses;
(function (Courses) {
 Courses[Courses["TypeScript"] = 2] = "TypeScript";
 Courses[Courses["Ionic"] = 3] = "Ionic";
 Courses[Courses["Angular2"] = 4] = "Angular2";
 Courses[Courses["NodeJS"] = 5] = "NodeJS";
})(Courses || (Courses = {}));
;
var tscourse = Courses.Ionic;
var c = tscourse;

What do you think?

In TypeScript, using the various types we define the data type of variables based on the variable being assigned to it. If we do not assign the data type, then typescript treats it as any type which can assume the data type is not mentioned. The any data type is the base type of all other types available in TypeScript. The primitive data types available such as number, string, bigint, boolean, null, and undefined, and all other types are derived from the objects.

I hope you will enjoy the Data Type in TypeScript while developing your web app. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Take our free typescript skill challenge to evaluate your skill

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET CHALLENGE