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

Object Types

Posted On : 09 Mar 2017
Updated On : 01 Jan 0001
Total Views : 902

Object Types

The object types in TypeScript are the Array, Tuple, Function, Class and Interface.

Array

The Array type is used to store same type of multiple values in a single variable and further your array elements you can access using the index number.

An Array type can be defined using square brackets '[ ]' followed by elemType or generic array type 'Array' as given below:

array.ts

let numberList: number[] = [1, 2, 3];
//OR
let numList: Array = [1, 2, 3];

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

array.js

var numberList = [1, 2, 3];
var numList = [1, 2, 3];

Tuple

The Tuple type represents a JavaScript array where you can define the datatype of each element in array.

tuple.ts

let tuple: [string, number];
tuple = ["Gurukulsight", 1];

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

tuple.js

var tuple;
tuple = ["Gurukulsight", 1];

Function

Like JavaScript, TypeScript functions can be created both as a named function or as an anonymous function. In TypeScript, you can add types to each of the parameter and also add a return type to function.

function.ts

//named function with number as return type
function add(x: number, y: number): number {
 return x + y;
}
//anonymous function with number as return type
let sum = function (x: number, y: number): number {
 return x + y;
};


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

function.js

function add(x, y) {
 return x + y;
}
var sum = function (x, y) {
 return x + y;
};

Class

ECMAScript 6 or ES6 provides class type to build JavaScript application by using object-oriented class-based approach. In TypeScript, you can compile class type down to JavaScript standard ES5 that will work across all major browsers and platforms.

class.ts

class Student {
 rollNo: number;
 name: string;

 constructor(rollNo: number, name: string) {
 this.rollNo = rollNo;
 this.name = name;
 }
 showDetails() {
 return this.rollNo + " : " + this.name;
 }
}

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

class.js

var Student = (function () {
 function Student(rollNo, name) {
 this.rollNo = rollNo;
 this.name = name;
 }
 Student.prototype.showDetails = function () {
 return this.rollNo + " : " + this.name;
 };
 return Student;
}());

Interface

Interface acts as a contract between itself and any class which implements it. Interface cannot be instantiated but it can be referenced by the class object which implements it.

Hence, it can be used to represent any non-primitive JavaScript object.

interface.ts

interface IHuman {
 firstName: string;
 lastName: string;
}
class Employee implements IHuman {
 constructor(public firstName: string, public lastName: string) {
 }
}

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

interface.js

var Employee = (function () {
 function Employee(firstName, lastName) {
 this.firstName = firstName;
 this.lastName = lastName;
 }
 return Employee;
}());

Template Strings

JavaScript uses double quotes (") or single quotes (') to surround string data. String data within double or single quotes can only be in one line and there is no way to insert data into these strings. This results into a lot of string concatenation.

strings

let firstname: string = "Shailendra";
let site: string = 'Gurukulsight';

//string concatenation
let str = 'Hello, my name is ' + firstname + ' and I am the founder of ' + site;
console.log(str);

To solve these issues ES6 introduces a new type of string literal that is marked with back ticks (`). By using back ticks (`) you can manipulate strings easily.

template_strings

let firstname: string = "Shailendra";
let site: string = 'Gurukulsight';

//template string
let str = `Hello, my name is ${firstname} 
 and I am the founder of ${site}`;
console.log(str);

Type Annotation

Type Annotations means defining the type of a variable explicitly. The type used to specify an annotation can be a primitive type, an object type or any complex structure to represent data.

The type of a variable is defined by using colon (:) followed by type.

Syntax

  :  = ; 
  : ;

type_annotation.ts

let num: number = 2; //type of num is number
let str: string = "Gurukulsight"; //type of str is string
let numberList: number[] = [1, 2, 3]; //type of numberList is number array

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

type_annotation.js

var num = 2;
var str = "Gurukulsight";
var numberList = [1, 2, 3];

Type Inference

Type inference is a mechanism to determine the type of data at compile time in the absence of explicit type annotations. TypeScript will infer the type from the initial value.

type_inference.ts

let myString = 'Hello Gurukulsight'; // string
let myBool = true; // boolean
let myNumber = 1.23; // number
let myArray = ['Hello', 'Gurukulsight']; // string[]

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

type_inference.js

var myString = 'Hello Gurukulsight'; // string
var myBool = true; // boolean
var myNumber = 1.23; // number
var myArray = ['Hello', 'Gurukulsight']; // string[]

Type Assertion

A type assertion is just like a type casting, but it doesn’t perform special type checking or restructuring of data just like other languages like C# and Java. This process entirely works on compile time. Hence it has no impact on runtime.

Type assertions can be done using two ways

1. Angle-bracket syntax

anglebracket.ts

let anyValue: any = "Welcome to www.gurukulsight.com!";
let strLength: number = (anyValue).length;

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

anglebracket.js

var anyValue = "Welcome to www.gurukulsight.com!";
var strLength = anyValue.length;

2. As syntax

anglebracket.ts

let anyValue: any = "Welcome to www.gurukulsight.com!";
let strLength: number = (anyValue).length;

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

anglebracket.js

var anyValue = "Welcome to www.gurukulsight.com!";
var strLength = anyValue.length;
What do you think?

I hope you will enjoy the Object and Miscellaneous 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.



+