Please enable Javascript to correctly display the contents on Dot Net Tricks!

Primitive Types

Posted On : 09 Mar 2017
Updated On : 09 Mar 2017
Total Views : 730

Primitive Types

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

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.

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 give below:

number.js

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

Boolean

The Boolen primitive type is equivalent to JavaScript primitive type boolen which accepts a value that is either true or false. The boolean keyword is used to define 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 give 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 give 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 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 give 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 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 give 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 give 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 instance.

  2. Symbol.match

    - Used for matching the regular expression against a string.

  3. Symbol.iterator

    - Returns the default iterator for an object and 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 enum’s members start from 0. But you can change this by setting the value of one of its members.

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 give 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 give 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 give 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?

I hope you will enjoy the Primitive 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.



+