What are Generics in TypeScript ?

In this article, we will try to understand all the facts as well as the details associated with Generics in TypeScript along with some coding examples.

Generics in TypeScript:

• Whenever any program or code is written or executed, one major thing one always takes care of which is nothing but making reusable components which further ensures the scalability and flexibility of the program or the code for a long time.
• Generics, thus here comes into the picture as it provides a user to flexibly write the code of any particular data type (or return type) and that the time of calling that user could pass on the data type or the return type specifically.
• Generics provides a way to make the components work with any of the data types (or return types) at the time of calling it for a certain number of parameters (or arguments).
• In generics, we pass a parameter called type parameter which is put in between the lesser sign (<) and the greater sign (>), for example, it should be like <type_parameter_name>.

Syntax for writing Generics:

Following syntax we may use to add generics into our pre-written piece of code (this is the syntax of using Generics in functions):

function function_name <type_parameter> 
    (parameter_name : data_type_parameter) 
    : return_type_parameter {
        // Rest code......
    }

Advantages of using Generics in TypeScript:

Following are the list of advantages that generics provide in TypeScript:

• By using generics we may safely store a single type of object without storing the other types too.
• By using generics we need not implement the typecasting of any variable or function at the time of calling.
• Generics are usually checked at the compile time so no issue exists in runtime.

Now after understanding all of the above-mentioned details which are associated with Generics, let us move forward and see some of the following code examples for a better understanding of Generics-

Example 1: In this example, we will simply see how we may try to create a generic function with generic parameters inside it and further how we may call that generic function with generic parameters.

Javascript

function displayData <type_parameter>
    (parameter :type_parameter) : type_parameter{
      return parameter;
  }

let result1 = displayData <string> ("GeeksforGeeks");
let result2 = displayData <string> ("Hello World !!");
let result3 = displayData <number> (1234567890);

console.log(result1);
console.log(result2);
console.log(result3);

Output:

GeeksforGeeks
Hello World !!
1234567890

Example 2: In this example, we may try to create a generic function with a generic return type of array along with the generic parameters (that too of generic array data type) passed in it and further how we may call that generic function which will return the array as the result.

Javascript

let displayResult = <type_parameter>
    (data_item : type_parameter[]) : type_parameter[] => {
    return new Array <type_parameter>().concat(data_item);
  }

let numbersArray = displayResult<number>
    ([50 , 60 , 80 , 90]);

let stringArray = displayResult<string>
    (["Hello World", "GeeksforGeeks"]);

console.log(numbersArray);
console.log(stringArray);

numbersArray.push(100);
stringArray.push("Apple");

console.log(numbersArray);
console.log(stringArray);

Output:

[ 50, 60, 80, 90 ]
[ 'Hello World', 'GeeksforGeeks' ]
[ 50, 60, 80, 90, 100 ]
[ 'Hello World', 'GeeksforGeeks', 'Apple' ]

Example 3: In this example, we will be creating some multi-generic-type variables and will further see how we may call them inside our function which we are making for the execution.

Javascript

let displayResult = <type_1, type_2>
    (id : type_1, name : type_2) => {
      return id + " - " + name;
    }

let data_1 = displayResult<number,
    string>(2000, "GeeksforGeeks");

let data_2 = displayResult<number,
    string>(2001, "Hello World !!");

console.log(data_1);
console.log(data_2);

Output:

2000 - GeeksforGeeks
2001 - Hello World !!

Reference: https://www.typescriptlang.org/docs/handbook/2/generics.html