Understanding TypeScript Generics

Published on December 19, 20255 min read

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

// Usage with different types
const stringValue = identity<string>('hello'); // string
const numberValue = identity<number>(42); // number
const inferred = identity('world'); // TypeScript infers string or whatever type you pass in

This shows the core idea of generics: reusable code that works with multiple types while staying type-safe. The <T> syntax defines a type parameter that gets replaced with the actual type when you call the function.

What are Generics?

Generics are TypeScript's way of creating reusable components that work with multiple types rather than a single type.

Think of them as type variables; placeholders that get filled in with specific types.

The Problem Generics Solve:

Without generics, you'd need to create separate functions for each type:

typescript
// Without generics - repetitive code
function identityString(value: string): string {
  return value;
}

function identityNumber(value: number): number {
  return value;
}

// With generics - one function for all types
function identity<T>(value: T): T {
  return value;
}

Key Benefits:

Type Safety: Maintain type checking while working with different types
Code Reusability: Write once, use with multiple types
Better IntelliSense: Get accurate autocomplete and type hints
No Runtime Overhead: Generics are purely compile-time constructs

Basic Generic Syntax

Generic Functions

The most common use of generics is in functions:

typescript
function getFirst<T>(items: T[]): T | undefined {
  return items[0];
}

// Usage
const firstNumber = getFirst<number>([1, 2, 3]); // number | undefined
const firstString = getFirst<string>(['a', 'b', 'c']); // string | undefined

// TypeScript can infer the type
const inferred = getFirst([true, false]); // boolean | undefined

Type Inference: TypeScript can often infer the generic type from the arguments, so you don't always need to specify it.

Generic Interfaces

Interfaces can also be generic:

typescript
interface Box<T> {
  value: T;
  getValue(): T;
  setValue(value: T): void;
}

// Usage
const numberBox: Box<number> = {
  value: 42,
  getValue() {
      return this.value;
  },
  setValue(value: number) {
      this.value = value;
  },
};

Generic Classes

Classes can use generics too:

typescript
class Stack<T> {
  private items: T[] = [];

  push(item: T): void {
      this.items.push(item);
  }

  pop(): T | undefined {
      return this.items.pop();
  }
}

// Usage
const numberStack = new Stack<number>();
numberStack.push(1);
numberStack.push(2);
const top = numberStack.pop(); // number | undefined

Generic Constraints

Constraints let you limit which types can be used with a generic:

typescript
// Constraint: T must have a length property
function getLength<T extends { length: number }>(item: T): number {
  return item.length;
}

// Works with arrays, strings, etc.
getLength([1, 2, 3]); // 3
getLength('hello'); // 5
// getLength(42); // Error: number doesn't have length

Using keyof with Constraints

A useful pattern is constraining to object keys:

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

interface User {
  id: string;
  name: string;
  email: string;
}

const user: User = {
  id: '1',
  name: 'John',
  email: '[email protected]',
};

const name = getProperty(user, 'name'); // string
// const invalid = getProperty(user, 'age'); // Error: 'age' doesn't exist

Why This Works: K extends keyof T forces key to be a valid property name of T. TypeScript then knows the return type is T[K], the type of that specific property.

Common Use Cases

Array Utilities

typescript
// Get last element
function getLast<T>(items: T[]): T | undefined {
  return items[items.length - 1];
}

// Filter by property
function filterBy<T, K extends keyof T>(
  items: T[],
  key: K,
  value: T[K]
): T[] {
  return items.filter((item) => item[key] === value);
}

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

const people: Person[] = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
];

const adults = filterBy(people, 'age', 30); // Person[]

API Response Wrapper

typescript
interface ApiResponse<T> {
  data: T;
  status: number;
  message?: string;
}

async function fetchData<T>(url: string): Promise<ApiResponse<T>> {
  const response = await fetch(url);
  const data = await response.json();
  return {
      data,
      status: response.status,
  };
}

// Usage
interface User {
  id: string;
  name: string;
}

const userResponse = await fetchData<User>('/api/user');
// userResponse.data is typed as User

Why This Pattern Works: The data property stays correctly typed across different endpoints. Fetching /api/user gives you ApiResponse<User>, while /api/products could give you ApiResponse<Product[]>.

Best Practices

Leverage Type Inference

typescript
// TypeScript can infer the type
const result = identity('hello'); // string

// Only specify when necessary
const result2 = identity<string | null>(null); // string | null

Use Constraints Judiciously

typescript
// Good: Constraint enables functionality
function getLength<T extends { length: number }>(item: T): number {
  return item.length;
}

// Avoid: Unnecessary constraint limits flexibility
function process<T extends string>(value: T): T {
  return value;
}
// Better: Let it work with any type
function process<T>(value: T): T {
  return value;
}

Combine Generics with Utility Types

typescript
function update<T>(obj: T, updates: Partial<T>): T {
  return { ...obj, ...updates };
}

function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
  const result = {} as Pick<T, K>;
  keys.forEach((key) => {
      result[key] = obj[key];
  });
  return result;
}

Conclusion

Generics are a core TypeScript feature that lets you write reusable, type-safe code. You can build components that work with multiple types while keeping full type safety and IntelliSense support.

Key Takeaways:

Generics create reusable code that works with multiple types
Type inference often removes the need to specify types
Constraints let you limit types and enable specific functionality
Generics work with functions, interfaces, classes, and type aliases

Remember: Generics are about flexible, reusable code that stays type-safe. Start simple and add complexity only when needed.

References

All articles