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

Generics

Posted On : 10 Mar 2017
Updated On : 01 Jan 0001
Total Views : 566

Generics

Generics enforce type safety without compromising performance, or productivity. In generics, a type parameter is supplied between the open (<) and close (>) brackets and which makes it strongly typed collections i.e. generics collections contain only similar types of objects.

In TypeScript, you can create generic functions, generic methods, generic interfaces and generic classes.

generic.ts

function doReverse(list: T[]): T[] {
 let revList: T[] = [];
 for (let i = (list.length - 1); i >= 0; i--) {
 revList.push(list[i]);
 }
 return revList;
}
let letters = ['a', 'b', 'c', 'd', 'e'];
let reversedLetters = doReverse(letters); // e, d, c, b, a

let numbers = [1, 2, 3, 4, 5];
let reversedNumbers = doReverse(numbers); // 5, 4, 3, 2, 1

Generic Functions

When a function implementation includes type parameters in its signature then it is called a generic function. A generic function has a type parameter enclosed in angle brackets (< >) immediately after the function name.

The following is an example of generic function:

genericfunction.ts

function doReverse(list: T[]): T[] {
 let revList: T[] = [];
 for (let i = (list.length - 1); i >= 0; i--) {
 revList.push(list[i]);
 }
 return revList;
}
let letters = ['a', 'b', 'c', 'd', 'e'];
let reversedLetters = doReverse(letters); // e, d, c, b, a

let numbers = [1, 2, 3, 4, 5];
let reversedNumbers = doReverse(numbers); // 5, 4, 3, 2, 1

Generics are purely compile-time representation; compiled JavaScript code does not have such representation. The compiled JavaScript (ES5) code for the above TypeScript code is give below:

genericfunction.js

function doReverse(list) {
 var revList = [];
 for (var i = (list.length - 1); i >= 0; i--) {
 revList.push(list[i]);
 }
 return revList;
}
var letters = ['a', 'b', 'c', 'd', 'e'];
var reversedLetters = doReverse(letters); 

var numbers = [1, 2, 3, 4, 5];
var reversedNumbers = doReverse(numbers);

Generic Classes

A generic class has a type parameter enclosed in angle brackets (< >) immediately after the class name. In generic class, same type parameter can be used to annotate method parameters, properties, return types, and local variables.

The following is an example of generic class:

genericclass.ts

class ItemList
{
 private itemArray: Array;
 constructor() {
 this.itemArray = [];
 }

 Add(item: T) : void {
 this.itemArray.push(item);
 }
 GetAll(): Array {
 return this.itemArray;
 }
}
let fruits = new ItemList();
fruits.Add("Apple");
fruits.Add("Mango");
fruits.Add("Orange");

let listOfFruits = fruits.GetAll();
for (let i = 0; i < listOfFruits.length; i++) {
 console.log(listOfFruits[i]);
}
/* -- Output ---
Apple
Mango
Orange
*/

Generics are purely compile-time representation; compiled JavaScript code does not have such representation. The compiled JavaScript (ES5) code for the above TypeScript code is give below:

genericclass.js

var ItemList = (function () {
 function ItemList() {
 this.itemArray = [];
 }
 ItemList.prototype.Add = function (item) {
 this.itemArray.push(item);
 };
 ItemList.prototype.GetAll = function () {
 return this.itemArray;
 };
 return ItemList;
}());
var fruits = new ItemList();
fruits.Add("Apple");
fruits.Add("Mango");
fruits.Add("Orange");
var listOfFruits = fruits.GetAll();
for (var i = 0; i < listOfFruits.length; i++) {
 console.log(listOfFruits[i]);
}

Generic Interfaces

A generic interface has a type parameter enclosed in angle brackets (< >) immediately after the interface name. In generic interface, same type parameter can be used to annotate method parameters, properties, return types, and local variables.

The following is an example of generic interface:

genericinterface.ts

interface IItemList {
 itemArray: Array;
 Add(item: T): void;
 GetAll(): Array;
}

class ItemList implements IItemList
{
 itemArray: Array;
 constructor() {
 this.itemArray = [];
 }

 Add(item: T): void {
 this.itemArray.push(item);
 }
 GetAll(): Array {
 return this.itemArray;
 }
}

let fruits = new ItemList();
fruits.Add("Apple");
fruits.Add("Mango");
fruits.Add("Orange");

let listOfFruits = fruits.GetAll();
for (let i = 0; i < listOfFruits.length; i++) {
 console.log(listOfFruits[i]);
}
/* -- Output ---
Apple
Mango
Orange
*/

Generics are purely compile-time representation; compiled JavaScript code does not have such representation. The compiled JavaScript (ES5) code for the above TypeScript code is give below:

genericinterface.js

var ItemList = (function () {
 function ItemList() {
 this.itemArray = [];
 }
 ItemList.prototype.Add = function (item) {
 this.itemArray.push(item);
 };
 ItemList.prototype.GetAll = function () {
 return this.itemArray;
 };
 return ItemList;
}());
var fruits = new ItemList();
fruits.Add("Apple");
fruits.Add("Mango");
fruits.Add("Orange");
var listOfFruits = fruits.GetAll();
for (var i = 0; i < listOfFruits.length; i++) {
 console.log(listOfFruits[i]);
}
What do you think?

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



+