Last Updated : 23 Jul, 2025
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:
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:
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
What are Generics in TypeScript
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4