Master TypeScript Generics: A Beginner’s Guide with Real-World Examples

Master TypeScript Generics with this beginner-friendly guide, featuring real-world examples and practical tips to improve your code’s flexibility.

TypeScript has rapidly become the go-to language for frontend developers, and with good reason. Its static type system adds a layer of safety and clarity to JavaScript, preventing common errors and improving code maintainability. One of the most powerful features of TypeScript is Generics. In this article, we’ll dive into TypeScript Generics, starting from the basics and building up to more advanced use cases, with real-world examples that will help you write cleaner and more reusable code.

By the end of this guide, you’ll not only understand the concept of generics but also feel comfortable using them in your day-to-day TypeScript development.

1. Introduction to TypeScript Generics

1.1. What Are TypeScript Generics?

In TypeScript, generics allow you to write functions, classes, and interfaces that can work with any data type while still maintaining full type safety. They allow you to create reusable code components that are flexible yet type-safe.

For example, instead of writing multiple versions of a function that handles different types of data, you can write a single generic function that works for all types. This can drastically reduce code duplication and improve readability.

Here’s a basic example to illustrate the concept:

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

const numberIdentity = identity(1); // number
const stringIdentity = identity("hello"); // string

In this function, T is a generic type parameter that can represent any type. The function identity works with any type passed to it, but it ensures that the input type is consistent with the return type.

1.2. Why Are Generics Important?

Generics provide three main benefits:

1. Type Safety: They help avoid errors by ensuring that the types are consistent throughout your code. For example, a generic function won’t allow you to pass a string when it expects a number, and vice versa.

2. Reusability: By using generics, you can create functions, classes, and interfaces that work with any type, allowing for more flexible code without sacrificing type safety.

3. Maintainability: As you scale up your project, generics make it easier to refactor code since you don’t need to maintain multiple versions of functions or interfaces for different types.

2. How to Define and Use TypeScript Generics

2.1. Basic Syntax of Generics

Let’s look at how to define a basic generic function. The syntax involves using angle brackets <T> to define the generic type parameter:

function log<T>(value: T): void {
  console.log(value);
}

In this example, T represents the type of value. When calling log, TypeScript can infer the type from the argument you pass to the function:

log("Hello, world!"); // TypeScript infers T as string
log(123); // TypeScript infers T as number

2.2. Generic Functions with Multiple Parameters

You can also define generics that work with multiple parameters. Here’s an example of a function that accepts two different types:

function combine<T, U>(a: T, b: U): string {
  return `${a} and ${b}`;
}

console.log(combine(5, "apples")); // "5 and apples"

In this example, T represents the type of a, and U represents the type of b. This makes the function flexible, while ensuring that the types of a and b are correctly enforced.

3. Advanced Use Cases of TypeScript Generics

3.1. Generic Interfaces and Classes

Generics are not just limited to functions. They can also be used in interfaces and classes. Let’s look at an example of a generic class that works with any data type:

class Box<T> {
  value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }
}

const numberBox = new Box(123); // Box<number>
const stringBox = new Box("hello"); // Box<string>

In this example, the Box class is generic. It accepts a value of type T, and the getValue method returns that value, maintaining type safety.

3.2. Generic Constraints

Sometimes, you may want to restrict the types that can be used with a generic. This can be done using constraints. Let’s say you want a function that only works with types that have a length property (e.g., strings or arrays). You can add a constraint like this:

function logLength<T extends { length: number }>(value: T): void {
  console.log(value.length);
}

logLength("Hello, world!"); // Works because string has a length property
logLength([1, 2, 3]); // Works because array has a length property

Here, T extends { length: number } ensures that the type passed to the function has a length property, like strings and arrays.

3.3. Generic Utility Types

TypeScript comes with several built-in generic utility types that can help you build more flexible and type-safe applications. For example:

• Partial: Makes all properties in T optional.

interface Person {
  name: string;
  age: number;
}

const person: Partial<Person> = {}; // name and age are optional

• Readonly: Makes all properties in T read-only.

const person: Readonly<Person> = { name: "John", age: 30 };
// person.name = "Jane"; // Error: cannot assign to 'name' because it is a read-only property.

• Record<K, T>: Constructs an object type with a set of property keys K and values of type T.

type Page = "home" | "about" | "contact";
const pageTitles: Record<Page, string> = {
  home: "Welcome",
  about: "About Us",
  contact: "Contact Us"
};

These utility types can simplify your code, reducing boilerplate while enhancing its type safety.

4. Real-World Examples of TypeScript Generics

4.1. Working with Arrays and Collections

Generics are useful when working with collections like arrays. Let’s consider a real-world example where you need to filter out elements from an array that don’t match a given type:

function filterArray<T>(arr: T[], predicate: (value: T) => boolean): T[] {
  return arr.filter(predicate);
}

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = filterArray(numbers, (num) => num % 2 === 0); // [2, 4]

In this example, the filterArray function works with any type of array (T[]). The function takes a predicate function that filters the array based on a condition.

4.2. Working with React Components

In React development, TypeScript Generics can help you create reusable components that work with any type of props. For instance, consider a modal component:

type ModalProps<T> = {
  data: T;
  onClose: () => void;
};

function Modal<T>({ data, onClose }: ModalProps<T>) {
  return (
    <div>
      <h1>{data}</h1>
      <button onClick={onClose}>Close</button>
    </div>
  );
}

<Modal data="Hello, World!" onClose={() => {}} />; // Works with string data
<Modal data={123} onClose={() => {}} />; // Works with number data

In this example, the Modal component is flexible, as it can accept any data type as its data prop, making it reusable for different use cases.

5. Best Practices and Common Pitfalls

5.1. Avoid Overusing Generics

While generics are a powerful tool, overusing them can make your code harder to read and maintain. Use generics when it truly adds value, like when writing reusable components or functions that operate on multiple types.

5.2. Type Inference vs. Explicit Typing

TypeScript often infers types for generics, but there are times when you’ll want to explicitly specify the type. Be mindful of when inference is sufficient, and when you should specify the type for clarity and correctness.

5.3. Handle Edge Cases with Constraints

When working with generics, ensure you handle edge cases properly, especially when you apply constraints. Always check for potential issues when narrowing types and make sure to test your code thoroughly.

6. Conclusion

By now, you should have a solid understanding of TypeScript Generics and their practical applications. Let’s recap the key takeaways:

• Generics allow you to write flexible and reusable code while maintaining type safety.
• Generics can be used with functions, classes, and interfaces to create components that work with any type.
• Constraints help ensure type safety when you want to restrict the types that can be used with a generic.
• Generics can be used with built-in TypeScript utility types like Partial, Readonly, and Record for even more flexibility.

Generics are a powerful tool in TypeScript, and mastering them will greatly improve your ability to write clean, efficient, and maintainable code.