TypeScript Generic Functions

Generic functions in TypeScript allow you to define functions that work with different data types while maintaining type safety. With generics, you can create reusable and flexible code without losing the advantages of TypeScript's static typing system.

 

What are Generic Functions?

A generic function is a function that can operate on multiple types, where the type of the input and the output can be specified by the user when the function is called. This is achieved by using type parameters, which are placeholders for types that will be determined when the function is invoked.

 

Syntax of Generic Functions

To define a generic function, you use a type parameter inside angle brackets (<T>). The type parameter T can be replaced by any type when the function is used.

function genericFunction<T>(value: T): T {
  return value;
}

• <T>: This defines a type parameter T that will represent the type of the argument and the return value.
• value: T: The function accepts a parameter value of type T.
• : T: The return type is also of type T, meaning it will match the type of value.

 

Example of a Generic Function

1. Identity Function

Here's an example of a simple generic function called identity that returns the input value:

function identity<T>(value: T): T {
  return value;
}

console.log(identity(5));       // Output: 5 (number)
console.log(identity("Hello")); // Output: "Hello" (string)

• The identity function can accept any type (number, string, etc.) as the argument and return the same type.
• TypeScript infers the type of T based on the argument provided.

2. Generic Function with Multiple Type Parameters

You can use multiple type parameters in a generic function. Here's an example of a function that swaps two values of different types:

function swap<T, U>(a: T, b: U): [U, T] {
  return [b, a];
}

const result = swap(1, "one");
console.log(result);  // Output: ["one", 1]

• This swap function takes two parameters: a of type T and b of type U.
• It returns a tuple with the first element being of type U and the second element being of type T.

 

Using Constraints in Generic Functions

You can restrict the types that can be used with a generic function by using constraints. Constraints ensure that only types that match the provided constraint can be used for a particular type parameter.

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

console.log(lengthOf([1, 2, 3]));  // Output: 3 (array)
console.log(lengthOf("Hello"));    // Output: 5 (string)

• In this example, the type parameter T is constrained to types that have a length property, such as string or array.
• If you try to pass a type that doesn't have a length property, TypeScript will throw an error.

 

Generic Functions with Default Types

You can also specify a default type for a generic parameter. If the user doesn't provide a specific type when calling the function, the default type will be used.

function wrapInArray<T = string>(value: T): T[] {
  return [value];
}

console.log(wrapInArray(5));          // Output: [5] (number)
console.log(wrapInArray("Hello"));    // Output: ["Hello"] (string)
console.log(wrapInArray(true));       // Output: [true] (boolean)

• In this case, the default type for T is string. However, you can override it by providing a different type when calling the function.

Example: Generic Function with a Callback

Generic functions are also useful when you want to define a function that takes a callback with a specific type signature.

function processArray<T>(arr: T[], callback: (item: T) => void): void {
  arr.forEach(callback);
}

processArray([1, 2, 3], (num) => console.log(num * 2));  // Output: 2, 4, 6
processArray(["a", "b", "c"], (str) => console.log(str.toUpperCase()));  // Output: A, B, C

• The processArray function takes an array of type T and a callback function that processes each element of type T.
• The type of the array (T) is determined based on the argument passed when calling the function.

 

Summary

Generic functions in TypeScript provide flexibility and type safety. They allow you to write functions that can operate on various types while ensuring that type correctness is maintained throughout the code. Some key points:

• Reusable Code: You can define a function that works with different types without duplicating code.
• Type Safety: Generics preserve the advantages of static typing, ensuring that the function works with the correct types.
• Constraints: You can restrict the types that can be used with a generic, making your code more predictable.
• Default Types: You can provide default types for generics, simplifying usage when no type is explicitly provided.

Generics are essential for writing flexible and reusable functions, allowing you to build robust and scalable applications in TypeScript.