TypeScript Generic Functions
Last Updated :
15 Sep, 2025
TypeScript generic functions allow you to create functions that work with various types while maintaining type safety. By using type parameters, defined within angle brackets (<T>), generics enable functions to operate on different data types without losing the benefits of TypeScript's type-checking.
Syntax:
function functionName<T>(parameterName: T): ReturnType {
// the implementation
}
In the above syntax:
- functionName : The name of the generic function.
- <T> : A type parameter, allowing the function to work with multiple types.
- parameterName: T : The function parameter whose type depends on the type argument.
- ReturnType : The type returned by the function, based on the type argument.
Example 1: Generic Function with Single Type Parameter
A generic function with a single type parameter works with different data types while ensuring type safety.
JavaScript
function gfg<T>(arg: T): T {
return arg;
}
let result1: string = gfg<string>("GEEKSFORGEEKS");
let result2: number = gfg<number>(740);
let result3: boolean = gfg<boolean>(false);
console.log(result1);
console.log(result2);
console.log(result3);
Output:
GEEKSFORGEEKS
740
false
In this example:
- The function
gfg
takes a generic parameter T
. - It returns the same type it receives, ensuring type consistency.
- The function works for
string
, number
, and boolean
without rewriting.
Example 2: Generic Function with Array Parameter
Generics can also be applied to arrays, allowing functions to safely work with collections of different element types.
JavaScript
function arrayEl<T>(arr: T[]): void {
for (const x of arr) {
console.log(x);
}
}
let elements: number[] = [101, 102, 103];
arrayEl(elements);
let elements1: string[] = ["Geeks", "For", "Geeks"];
arrayEl(elements1);
Output:
101
102
103
Geeks
For
Geeks
In this example:
- The function
arrayEl
takes a generic array T[]
. - It works for both number arrays and string arrays.
- TypeScript ensures that only valid array elements are passed.
Example 3: Generic Function with Multiple Type Parameters
Generic functions can also use multiple type parameters, enabling flexible operations with different data types.
JavaScript
function mergeArrays<T, U>(arr1: T[], arr2: U[]): (T | U)[] {
return [...arr1, ...arr2];
}
// Arrays with different types
const numbers: number[] = [1, 2, 3];
const words: string[] = ["hello", "world"];
// Merging arrays of different types
const mergedArray: (number | string)[] = mergeArrays(numbers, words);
// Outputting the merged array
console.log(mergedArray);
Output:
[1, 2, 3, "hello", "world"]
In this example:
- The function
mergeArrays
uses two generic types T
and U
. - It merges arrays of different types into one.
- The return type is a union
(T | U)[]
, allowing elements of both types.
Explore
TypeScript Tutorial
8 min read
TypeScript Basics
TypeScript primitive types
TypeScript Object types
TypeScript other types
TypeScript combining types
TypeScript Assertions
TypeScript Functions
TypeScript interfaces and aliases
TypeScript classes