TypeScript generics enable reusable, type-safe code by allowing functions, interfaces, and components to work with multiple types while preserving type information. 1. Generics use type variables like T to represent placeholder types, as seen in the identity function, preserving type safety unlike any. 2. They are ideal for structures like ApiResponse, enabling consistent handling of varying data shapes across APIs or state managers. 3. Using extends, generics can be constrained to ensure required properties, such as T extends { id: number } for objects with an id field. 4. Multiple type parameters (e.g., K, V, R) support complex transformations like mapObject, and default types (e.g., T = unknown) improve usability without sacrificing flexibility. 5. Generics are widely used in utility functions, React hooks like useFetch(), and state management to avoid duplication and ensure compile-time safety, making them essential for scalable, maintainable code when logic repeats across different types.

TypeScript generics are one of the most powerful features for writing reusable, type-safe code. They allow you to create components, functions, or classes that work over a variety of types rather than a single one—without sacrificing type information. This unlocks flexibility while maintaining strong typing, which is essential in large-scale applications.

Let’s break down how generics help you build more reusable code and when to use them.

1. What Are Generics? (And Why You Need Them)

At their core, generics let you write functions or data structures that can handle different types while preserving type safety.

For example, imagine a simple identity function:

function identity(arg: any): any {
  return arg;
}

This works—but it throws away type information. With generics, you preserve it:

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

Here, T is a type variable—a placeholder for whatever type will be used when the function is called.

You can call it like this:

const num = identity(42);        // type: number
const str = identity("hello");   // type: string

TypeScript infers T automatically, so you don’t always have to write identity<number>(42).

This may seem trivial, but it becomes critical when building utilities like caches, APIs, or state managers where types vary but behavior stays consistent.

2. Using Generics in Functions and Interfaces

Generics really shine when abstracting logic across multiple types.

Example: A Generic API Response Wrapper

Say you're handling API responses with a consistent shape:

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

Now you can reuse this interface across different endpoints:

const userResponse: ApiResponse<User> = {
  data: { id: 1, name: "Alice" },
  status: 200,
};

const postsResponse: ApiResponse<Post[]> = {
  data: [{ id: 1, title: "Hello" }],
  status: 200,
};

Your components or services can now handle ApiResponse<T> without knowing the exact shape of T, yet still offer full autocomplete and type checking.

3. Constraining Generics with extends

Sometimes you want flexibility—but not too much. You can restrict what types a generic accepts using extends.

For example, suppose you want a function that extracts a property from an object, but only if it has an id field:

function logId<T extends { id: number }>(item: T): void {
  console.log(item.id);
}

Now this ensures any argument passed must have an id of type number:

logId({ id: 123, name: "Bob" }); // ? OK
logId({ name: "Charlie" });      // ? Error: missing 'id'

This pattern is common in utility functions, form handlers, or serializers where you need structural guarantees.

4. Multiple Type Parameters and Default Types

You’re not limited to one generic type.

function mapObject<K, V, R>(
  obj: Record<K, V>,
  fn: (value: V) => R
): Record<K, R> {
  return Object.fromEntries(
    Object.entries(obj).map(([key, value]) => [key, fn(value)])
  ) as Record<K, R>;
}

Also, you can provide default types for better ergonomics:

interface QueryResult<T = unknown> {
  data: T;
  loading: boolean;
}

Now QueryResult defaults to unknown if no type is specified, but remains flexible.

5. Reusable Components in Practice

Generics are especially useful in:

• Utility functions (e.g., pick, omit, deepClone)
• State management (e.g., actions, reducers with payload types)
• React components (e.g., forms, modals that accept generic props)
• Data fetching hooks (e.g., useFetch<T>())

Example: A generic React hook

function useFetch<T>(url: string): { data: T | null; loading: boolean } {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(r => r.json())
      .then(data => setData(data as T))
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading };
}

// Usage
const { data } = useFetch<User[]>("/api/users");

Here, the same hook safely handles any expected response type.

Generics might feel abstract at first, but they’re just TypeScript’s way of letting you write future-proof code. Once you start using them, you’ll find yourself duplicating less, refactoring with confidence, and catching bugs at compile time.

Basically: if you’re repeating the same logic for different types, it’s time to reach for generics.

The above is the detailed content of Unlocking Reusability with TypeScript Generics. For more information, please follow other related articles on the PHP Chinese website!