Generic Type In Typescript

Generic in Typescript 

Generic is used to create a component that works with various data types. 

It allows the users to use flexible data types of their choice. In typescript we need to write type parameter between the <T>

Note : Generic gives us power to pass a range of types to components.

How many ways can we use generic ?
a)Generic class

b)Generic function

c)Generic method

d)Generic Interface

What are the advantages of generic in Typescript ?

Ans : Following advantages :

a)Single Type : We can hold a single type of object in Generic. It does not allow you to store another object.

b)No type casting required. As the user can use any data type of their choise

c)Code gets checked at compile time

Let us understand by example :

function something(data: string): string {

    return data;


Note : calling function with string argument will work fine

var output = something(“Mohana”);

console.log(“The output is “, output);

Note : calling function with number argument will give error

var output2 = something(121);  Error , because we already defined the argument is of string type

Note : Above function will not work for the number type. That’s why above program is not generic. It should not work for any data type

Solution : The solution is to make the function as generic

function somethingAgain<T>(data: T): T {

    return data;


var output3 = somethingAgain<string>(“Andrew”); //correct

var output4 = somethingAgain<number>(121); //correct


Note :  Above function (somethingAgain) , now work for any data type

Here T defines Type. We can have multiple generic types

function somethingNormal<T, U, M, K>(a: T, b: U, c: M, d: K): [T, U, M, K] {

    return [a, b, c, d];


var output5 = somethingNormal<string, number, string, boolean>(“Amir”, 21, “Bangalore”, true);

console.log(“The output “, output5);

Note : here we have defined the generic type as string,number,string,boolean


Generic with non generic type

function somethingAlpha<T>(firstArg: T, secondArg: string): void {

    console.log(‘The data type of first arg is ‘, typeof firstArg);

    console.log(‘The data type of second arg is ‘, typeof secondArg);


Note : Here T is generic type and string is non generic type


Generic class

class Employee<T, M, C>{

    id: T;

    name: M;

    city: C;

    constructor(id: T, name: M, city: C) { = id; = name; = city;


    display() {

        console.log(“The id is “,;

        console.log(“Name is “,;

        console.log(“City is “,;



var em1 = new Employee<number, string, string>(1, “Andrew”, “Bangalore”);


var em2 = new Employee<string, string, string>(“2”, “Saket”, “Chennai”);


Note : In above program we have passed the id as number and string type respectively

Generic Interface

interface Person {

    first_name: string;

    last_name: string;

    age: number;


interface Player extends Person {

    game: string;


function displatDetails<T extends Player>(player: T): void {

    console.log(“The name is “, player.first_name + ” “ + player.last_name);

    console.log(“Age is “, player.age);

    console.log(“Game is “,;


var playerInfo: Player = {

    first_name: “Antony”,

    last_name: “Borwell”,

    age: 25,

    game: “Football”




Generic constant with class

class Person {

    id: number;

    name: string;

    age: number;

    constructor(id: number, name: string, age: number) { = id; = name;

        this.age = age;



function show<T extends Person>(per: T): void {

    console.log(“Person name “ +;

    console.log(“Person age “ + this.age);


var person1 = new Person(1, “Mohan”, 21);


Site Footer