Simple Examples to Understand Generic Functions and Types in TypeScript

When working with TypeScript, understanding how to leverage generics can greatly enhance the flexibility and reusability of your code. In this blog post, we will explore simple examples to grasp the concept of generic functions and types in TypeScript.

The Problem Without Generics

Let's start by considering a common scenario where we want to retrieve the length of an array. Without generics, we often resort to writing separate functions for different types of arrays, such as numbers or strings. This can lead to code duplication and reduced maintainability.

function getNumberArrayLength(arr: number[]): number {
    return arr.length;
}

function getStringArrayLength(arr: string[]): number {
    return arr.length;
}

Introducing Generics

Generics provide a solution to this problem by allowing us to write a single function that can work with arrays of any type. By using a placeholder like Type, we can create a more versatile function.

function getArrayLength<Type>(arr: Type[]): number {
    return arr.length;
}

In the getArrayLength function, Type serves as a placeholder for any type. When calling the function, we can specify the type, enabling the function to handle arrays of different types seamlessly.

let nums: number[] = [1, 2, 3];
let numLength: number = getArrayLength<number>(nums);
console.log(numLength); // Outputs: 3

let strs: string[] = ['a', 'b', 'c'];
let strLength: number = getArrayLength<string>(strs);
console.log(strLength); // Outputs: 3

In the above examples, we demonstrate how to use the getArrayLength function with arrays of numbers and strings by specifying the type during the function call.

Practical Example: Reversing Arrays

To further illustrate the power of generics, let's consider a practical example where we create a generic function to reverse an array of any type.

function reverseArray<Type>(arr: Type[]): Type[] {
  return arr.reverse();
}

let numbers: number[] = [1, 2, 3, 4, 5];
let reversedNumbers: number[] = reverseArray(numbers);
console.log(reversedNumbers); // Output: [5, 4, 3, 2, 1]

let strings: string[] = ['apple', 'banana', 'cherry'];
let reversedStrings: string[] = reverseArray(strings);
console.log(reversedStrings); // Output: ['cherry', 'banana', 'apple']

In this example, the reverseArray function showcases how a generic function can effortlessly handle arrays of different types, allowing for code reusability and flexibility.

Conclusion

Generics in TypeScript are a powerful feature that can streamline your code and make it more adaptable to different data types. By utilizing generic functions and types, you can write cleaner, more concise code that is easier to maintain and extend. Experiment with generics in your TypeScript projects to unlock their full potential!