What are Generics in TypeScript ?

Generics in TypeScript allow developers to create reusable components that can work with multiple data types while maintaining type safety. Generics are widely used in functions, classes, and interfaces for building reusable and adaptable code.

Syntax:

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

In the above syntax:

• function_name : Name of the function.
• type_parameter : A placeholder for the type (e.g., T).
• parameter_name: data_type_parameter : The function parameter whose type depends on the type argument.
• : return_type_parameter : Specifies that the return type also depends on the type argument.

Example 1: Generic Function with Parameters

Generic functions in TypeScript allow you to define functions that can work with multiple data types while maintaining type safety.

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

In this example:

• identity is a generic function with type parameter T.
• It accepts values of different types (string, number) and returns them without loss of type.
• The same function works for multiple data types without rewriting logic.

Example 2: Generic Function with Array Return Type

A generic function can also work with arrays, ensuring type safety while handling collections of data.

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' ]

In this example:

• The function getArray takes a generic array as input and returns it.
• Both number arrays and string arrays can be passed safely.
• The return type matches the input type, preserving type safety.

Example 3: Multiple Generic Type Parameters

Functions can also take multiple generic type parameters, allowing flexible handling of different types together.

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 !!

In this example:

• The function displayData uses two type parameters T and U.
• Different types (number and string) can be combined in a single call.
• Generics provide flexibility while keeping types consistent.

Example 4: Generics with Constraints

Generic constraints ensure that only values meeting certain requirements can be passed to a generic function.

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

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

Output:

5
3

In this example:

• The generic type T is constrained with extends { length: number }.
• Only values that have a length property (like strings and arrays) are allowed.
• This prevents passing types that don’t meet the requirement.