TypeScriptTypeScript10 min read

TypeScript Generics: Write Reusable Type-Safe Code

Master TypeScript generics - one of the most powerful features. Learn how to write reusable, type-safe code that works with any type. Essential for building robust TypeScript applications.

Rachel Kim
Dec 19, 2025
24k719

Generics are what make TypeScript truly powerful. They let you write code that works with any type while still maintaining type safety. Once you understand generics, you'll write much better TypeScript code.

What are Generics?

Generics are like variables for types. Instead of writing a function for strings, then for numbers, then for objects, you write it once with a generic type. TypeScript figures out the specific type when you use it.

Basic Generic Syntax

The syntax is simple - use angle brackets with a type variable. You can name it anything, but T (for Type) is common. The function works with whatever type you pass in, and TypeScript checks it.

Constraining Generics

Sometimes you want generics to have certain properties. You can constrain them using extends. This gives you flexibility while still ensuring type safety.

Real-World Examples

I'll show you practical examples - generic functions, generic interfaces, generic classes. These patterns you'll use in every TypeScript project. Understanding generics is essential for professional TypeScript development.

#TypeScript#Generics#Types#Advanced TypeScript

Common Questions & Answers

Q1

What are TypeScript generics?

A

Generics allow you to create reusable components that work with multiple types while maintaining type safety. They use type variables (like T) that get replaced with actual types when the code is used. This lets you write code once and use it with different types.

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

// Usage with different types
const num = identity<number>(42);        // number
const str = identity<string>('hello');   // string
const bool = identity<boolean>(true);    // boolean

// TypeScript infers the type
const inferred = identity('world');      // string (inferred)

// Generic interface
interface Box<T> {
  value: T;
}

const numberBox: Box<number> = { value: 42 };
const stringBox: Box<string> = { value: 'hello' };
Q2

How do I constrain generics?

A

Use extends keyword to constrain generics to types with certain properties. This ensures the generic type has the required properties while still allowing flexibility. Common constraints include extends keyof, extends object, or custom interfaces.

typescript
// Constrain to objects with length property
function getLength<T extends { length: number }>(item: T): number {
  return item.length;
}

getLength('hello');     // OK - string has length
getLength([1, 2, 3]);   // OK - array has length
// getLength(42);       // Error - number has no length

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

const person = { name: 'Alice', age: 30 };
getProperty(person, 'name');  // OK
// getProperty(person, 'email');  // Error - email not a key