Understanding TypeScript Generics

Published on December 19, 2025

// 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 example demonstrates the core concept of generics: creating reusable code that works with multiple types while maintaining type safety. The <T> syntax defines a type parameter that gets replaced with the actual type when the function is called.

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:

// 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:

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 explicitly specify it.

Generic Interfaces

Interfaces can also be generic:

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:

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 allow you to limit what types can be used with a generic:

// 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 powerful pattern is constraining to object keys:

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: 'john@example.com',
};

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

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

Common Use Cases

Array Utilities

// 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

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: This ensures that when you fetch different endpoints, the data property is correctly typed. Fetching /api/user gives you ApiResponse<User>, while /api/products could give you ApiResponse<Product[]>.

Best Practices

Leverage Type Inference

// 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

// 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

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 fundamental feature of TypeScript that enable you to write reusable, type-safe code. They allow you to create components that work with multiple types while maintaining full type safety and IntelliSense support.

Key Takeaways:

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

Remember: Generics are about creating flexible, reusable code while maintaining type safety. Start simple and add complexity only when needed.

References

GET IN TOUCH

Let's work together

I build fast, accessible, and delightful digital experiences for the web.
Whether you have a project in mind or just want to connect, I’d love to hear from you.

WRITE AN EMAIL

or reach out directly at hello@mohammadshehadeh.com