Open In App

TypeScript Generic Functions

Last Updated : 15 Sep, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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