17 Oct Mastering TypeScript Generics: Flexible and Reusable Code

TypeScript’s static typing helps developers catch errors early and write more robust code. One of the most powerful features TypeScript offers for creating reusable and flexible code is Generics. Generics allow us to write functions, interfaces, and classes that can work with various types while maintaining type safety. In this tutorial, we’ll explore the world of generics, look at how they work, and see where they can make our code more reusable and maintainable.

What Are Generics?

In simple terms, generics are a way to create components (functions, classes, or interfaces) that work with a variety of types without specifying those types upfront. Instead of hardcoding types, generics provide a placeholder (often denoted as T) that can be replaced by any specific type later on.

Consider this basic example of a function without generics:

function identity(arg: number): number {     return arg; } 

The identity function works only with numbers. But what if you wanted a similar function that works with any type (string, array, object, etc.)? That’s where generics come in.

Here’s the same identity function using generics:

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

In this example:

• T is a generic type parameter. It acts as a placeholder for the actual type that will be provided when the function is called.
• arg: T specifies that the argument must be of type T.
• The return type T means the function will return the same type as the argument.

Now, identity can work with any type:

console.log(identity<number>(42));   // Output: 42 console.log(identity<string>("Hello"));  // Output: Hello console.log(identity<boolean>(true)); // Output: true 

Benefits of Using Generics

1. Code Reusability: You can write a function once and use it with different types, reducing duplication.
2. Type Safety: Generics maintain the types passed to them, preventing unintended type mismatches.
3. Flexibility: They provide flexibility without losing the benefits of TypeScript’s static typing system.

Generic Functions

The most common use of generics is in functions. Here’s an example of a generic function that can accept and return any type of array:

function getFirstElement<T>(arr: T[]): T {     return arr[0]; }  console.log(getFirstElement<number>([1, 2, 3]));  // Output: 1 console.log(getFirstElement<string>(["a", "b", "c"]));  // Output: "a" 

Using Multiple Type Parameters

Generics can also work with multiple type parameters. For example, a function that combines two different types into a tuple:

function combine<T, U>(first: T, second: U): [T, U] {     return [first, second]; }  console.log(combine<string, number>("TypeScript", 2024));  // Output: ["TypeScript", 2024] 

Here, the combine function takes two arguments of different types (T and U) and returns a tuple that combines both types.

Generic Interfaces

Generics can also be used in interfaces to define flexible data structures. Here’s an example of a generic interface for a data container:

interface Container<T> {     value: T;     getValue: () => T; }  const stringContainer: Container<string> = {     value: "Hello",     getValue() {         return this.value;     } };  const numberContainer: Container<number> = {     value: 42,     getValue() {         return this.value;     } };  console.log(stringContainer.getValue());  // Output: Hello console.log(numberContainer.getValue());  // Output: 42 

In this example:

• The Container<T> interface defines a structure that can hold any type T.
• We can create stringContainer and numberContainer using the same interface but with different types.

Generic Classes

Generics are also extremely useful when defining classes. A common use case is creating data structures like Stacks or Queues, where you want to store items of a particular type but allow that type to be flexible.

Here’s an example of a generic Stack class:

class Stack<T> {     private items: T[] = [];      push(item: T): void {         this.items.push(item);     }      pop(): T | undefined {         return this.items.pop();     }      peek(): T | undefined {         return this.items[this.items.length - 1];     } }  const numberStack = new Stack<number>(); numberStack.push(1); numberStack.push(2); console.log(numberStack.pop());  // Output: 2  const stringStack = new Stack<string>(); stringStack.push("a"); stringStack.push("b"); console.log(stringStack.peek());  // Output: "b" 

In this example:

• Stack<T> is a class that can store elements of any type T.
• We can create instances of Stack for both number and string types, each ensuring that only those specific types can be pushed onto the stack.

Constraints in Generics

Sometimes, you want to limit the types that can be used with a generic. You can do this using constraints. For example, if you want a generic function that works only with objects that have a length property, you can define a constraint using the extends keyword:

interface HasLength {     length: number; }  function logLength<T extends HasLength>(item: T): void {     console.log(item.length); }  logLength("Hello");  // Output: 5 logLength([1, 2, 3]);  // Output: 3 logLength({ length: 10 });  // Output: 10 

Here, the generic type T is constrained to types that have a length property. This ensures that logLength can only be called with types that satisfy this condition.

Real-World Use Cases for Generics

Generics are widely used in TypeScript to make libraries and codebases more flexible and type-safe. Some real-world scenarios where generics are invaluable include:

1. Utility Functions: Many utility functions, like sorting or searching arrays, can benefit from generics. For example, the built-in Array<T> type is generic, allowing arrays to be typed for any data type:

const numbers: Array<number> = [1, 2, 3, 4, 5]; const strings: Array<string> = ["a", "b", "c"]; 

2. React Components: In frameworks like React, generics are used in component props to ensure the right types are passed. This makes components more reusable and type-safe:

interface ButtonProps<T> {     label: T;     onClick: () => void; }  function Button<T>(props: ButtonProps<T>): JSX.Element {     return <button onClick={props.onClick}>{props.label}</button>; } 

3. API Responses: Generics are often used when handling data from APIs, where the response structure may vary but still needs to be handled in a type-safe manner.

interface ApiResponse<T> {     data: T;     status: number; }  function fetchApi<T>(url: string): Promise<ApiResponse<T>> {     return fetch(url).then(response => response.json()); }  // Usage interface User {     name: string;     age: number; }  fetchApi<User>('/api/user')     .then(response => console.log(response.data.name)); 

Conclusion

Generics in TypeScript provide a powerful mechanism to write flexible, reusable, and type-safe code. By allowing us to define components that work with a variety of types while preserving type safety, generics open up new possibilities for crafting cleaner, more maintainable applications.

In this article, we’ve covered the fundamentals of generics and looked at practical examples like functions, interfaces, and classes. As you continue to explore TypeScript, you’ll find that generics are indispensable for writing scalable, reusable components in any TypeScript project.