Mastering TypeScript Generics

Unlock the full power of TypeScript by understanding and applying advanced generic patterns.

Introduction

Generics are one of the most powerful features in TypeScript, allowing you to write reusable, type-safe code that works with a variety of data types. While basic usage is straightforward, mastering generics opens up a world of advanced patterns that can significantly improve your codebase's robustness and maintainability.

In this guide, we'll go beyond Array<T> and explore constraints, conditional types, and utility types.

The Basics: Why Generics?

Without generics, we either have to give a specific type (which limits reuse) or use any (which loses type safety).

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

let output = identity<string>("myString");

Here, T captures the type the user provides (e.g., string), so that we can use that information later.

Generic Constraints

Sometimes you want to write a generic function that works on a set of types where you have some knowledge about what capabilities that type will have.

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);  // Now we know it has a .length property, so no more error
    return arg;
}

keyof and Type Lookup

You can declare a type parameter that is constrained by another type parameter. For example, you'd like to get a property from an object given its name. We'd like to ensure that we're not accidentally grabbing a property that doesn't exist on the obj.

function getProperty<T, K extends keyof T>(obj: T, key: K) {
    return obj[key];
}

let x = { a: 1, b: 2, c: 3, d: 4 };

getProperty(x, "a"); // okay
// getProperty(x, "m"); // error: Argument of type '"m"' is not assignable to parameter of type '"a" | "b" | "c" | "d"'.

Conditional Types

Conditional types allow you to choose types based on other types. They take the form T extends U ? X : Y.

type TypeName<T> =
    T extends string ? "string" :
    T extends number ? "number" :
    T extends boolean ? "boolean" :
    T extends undefined ? "undefined" :
    T extends Function ? "function" :
    "object";

type T0 = TypeName<string>;  // "string"
type T1 = TypeName<string[]>; // "object"

Utility Types

TypeScript provides several utility types to facilitate common type transformations.

• Partial<T>: Constructs a type with all properties of T set to optional.
• Readonly<T>: Constructs a type with all properties of T set to readonly.
• Pick<T, K>: Constructs a type by picking the set of properties K from T.
• Omit<T, K>: Constructs a type by picking all properties from T and then removing K.

Conclusion

Generics are a fundamental tool in the TypeScript developer's toolkit. By understanding constraints, indexed access types, and conditional types, you can write libraries and applications that are both flexible and strictly typed, catching errors at compile time rather than runtime.