Generic Functions in TypeScript

Last Updated : 19 Sep, 2026

Generics allow you to create reusable functions, classes, and interfaces that work with different data types while maintaining type safety.

frame_3252
  • Create reusable and flexible components.
  • Work with multiple data types without duplicating code.
  • Preserve type information throughout the code.
  • Commonly used with functions, classes, interfaces, and collections.

Syntax:

function functionName<T>(parameter: T): T {
    return parameter;
}
  • T: A type parameter that acts as a placeholder for a specific type.
  • parameter: T: Accepts a value of the specified generic type.
  • : T: Ensures the returned value has the same type.

Examples of Generics in TypeScript

The following examples demonstrate how generics provide flexibility while maintaining type safety.

Example 1: Generic Function

A generic function can accept and return values of different types while preserving their type information.

JavaScript 
function displayData<T>(data: T): T {
    return data;
}

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

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

Output:

GeeksforGeeks
Hello World!
1234567890
  • displayData uses T as a generic type parameter.
  • The same function works with both string and number.
  • The return type matches the type of the argument.

Note: TypeScript can usually infer the type, so <string> and <number> can be omitted.

const result1 = displayData("GeeksforGeeks");
const result3 = displayData(1234567890);

Example 2: Generic Function with Array

A generic function can work with arrays while preserving the type of their elements.

JavaScript 
function displayResult<T>(items: T[]): T[] {
    return [...items];
}

const numbersArray = displayResult([50, 60, 80, 90]);
const stringArray = displayResult(["Hello World", "GeeksforGeeks"]);

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

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

Output:

[50, 60, 80, 90, 100]
["Hello World", "GeeksforGeeks", "Apple"]
  • T[] represents an array containing values of type T.
  • The function works with both number and string arrays.
  • TypeScript prevents incompatible values from being added to each array.

Example 3: Multiple Generic Type Parameters

A generic function can use multiple type parameters to work with different types simultaneously.

JavaScript 
function displayData<T, U>(id: T, name: U): string {
    return `${id} - ${name}`;
}

const data1 = displayData<number, string>(2000, "GeeksforGeeks");
const data2 = displayData<number, string>(2001, "Hello World!");

console.log(data1);
console.log(data2);

Output:

2000 - GeeksforGeeks
2001 - Hello World!
  • T represents the type of id.
  • U represents the type of name.
  • Different types can be used together in the same function.

Example 4: Generic Function for Merging Arrays

Generic functions can use multiple type parameters to combine arrays containing different types while preserving type information.

JavaScript 
function mergeArrays<T, U>(arr1: T[], arr2: U[]): (T | U)[] {
    return [...arr1, ...arr2];
}

const numbers: number[] = [1, 2, 3];
const words: string[] = ["hello", "world"];

const mergedArray = mergeArrays(numbers, words);

console.log(mergedArray);

Output:

[1, 2, 3, "hello", "world"]
  • T represents the type of elements in the first array.
  • U represents the type of elements in the second array.
  • The return type (T | U)[] allows elements from both arrays.
  • The function can merge arrays containing different data types while maintaining type safety.

Example 5: Generics with Constraints

Generic constraints restrict the types that can be used with a generic function.

JavaScript 
function getLength<T extends { length: number }>(value: T): number {
    return value.length;
}

console.log(getLength("Hello"));
console.log(getLength([10, 20, 30]));

Output:

5
3
  • T extends { length: number } requires T to have a length property.
  • Strings and arrays satisfy this constraint.
  • Values without a length property cannot be passed to the function.
Comment

Explore