Introduction to TypeScript Generics in Reusable Components

TypeScript generics help you create components that work with any data type while keeping type safety and flexibility. They're especially useful when building React components that need to handle different types of data. For example, if you want a Box<T> component that can display any content type, you can use this code:

interface BoxProps<T> {
  children: T;
}

function Box<T>(props: BoxProps<T>) {
  return <div>{props.children}</div>;
}

This Box component can wrap any type of content while preserving type information. You might use it like this:

// With a string
<Box>Hello World</Box>

// With a number
<Box>{42}</Box>

// With a custom type
interface User {
  name: string;
  age: number;
}

<Box>{user}</Box>

Implementing TypeScript Generics in Functions

TypeScript functions make code more flexible by letting them work with multiple data types.. Here's a simple example:

function getFirstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

// Use with different types
const numbers = getFirstElement([1, 2, 3]);        // returns number
const strings = getFirstElement(['a', 'b', 'c']);  // returns string
const mixed = getFirstElement([true, 42, 'hello']); // returns boolean | number | string

You can also use multiple type parameters when you need to work with several types:

function pair<T, U>(first: T, second: U): [T, U] {
  return [first, second];
}

const result = pair('hello', 42); // returns [string, number]

Generic functions become particularly useful when working with data structures:

function filterArray<T>(arr: T[], predicate: (item: T) => boolean): T[] {
  return arr.filter(predicate);
}

// Example usage
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = filterArray(numbers, num => num % 2 === 0);

Using TypeScript Generics in Interfaces and Classes

Interfaces with generics help define flexible, type-safe contracts for your code. Let's look at how to create a data fetcher:

interface DataFetcher<T> {
  fetch(): Promise<T>;
}

class ApiDataFetcher<T> implements DataFetcher<T> {
  constructor(private endpoint: string) {}
  
  async fetch(): Promise<T> {
    const response = await fetch(this.endpoint);
    return response.json();
  }
}

This approach allows you to fetch data from various APIs in a flexible and type-safe manner, making the codebase easier to manage and expand.

Setting Constraints in TypeScript Generics

Type constraints are vital for maintaining type safety with generics. For example, you can create a KeyValuePair<K, V> class with constraints on K and V:

class KeyValuePair<K extends string, V> {
  private key: K;
  private value: V;

  constructor(key: K, value: V) {
    this.key = key;
    this.value = value;
  }
}

This example shows how constraints limit the types a generic can accept, ensuring type safety and preventing errors. You can also enforce constraints based on interfaces:

interface HasId {
  id: string;
}

function findById<T extends HasId>(items: T[], targetId: string): T | undefined {
  return items.find(item => item.id === targetId);
}

// Example usage with a type that matches the constraint
interface User extends HasId {
  name: string;
  email: string;
}

const users: User[] = [
  { id: "1", name: "Alice", email: "alice@example.com" },
  { id: "2", name: "Bob", email: "bob@example.com" }
];

const user = findById(users, "1"); // Returns User | undefined

Combining TypeScript Generics with React Components

Using generics in React components helps create reusable and type-safe UI components. For example, working with Convex's end-to-end type system, you can create components that are type-safe with your database schema:

import { Doc } from "../convex/_generated/dataModel";

interface DataListProps<T extends Doc<string>> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function DataList<T extends Doc<string>>({ 
  items, 
  renderItem 
}: DataListProps<T>) {
  return (
    <ul>
      {items.map(item => (
        <li key={item._id}>
          {renderItem(item)}
        </li>
      ))}
    </ul>
  );
}

Practical Uses of TypeScript Generics

A generic cache implementation demonstrates how generics work with utility types and map types.

class Cache<T> {
  private data = new Map<string, {value: T, timestamp: number}>();
  private ttl: number;  // Time to live in milliseconds

  constructor(ttlMinutes: number = 60) {
    this.ttl = ttlMinutes * 60 * 1000;
  }

  set(key: string, value: T): void {
    this.data.set(key, {
      value,
      timestamp: Date.now()
    });
  }

  get(key: string): T | undefined {
    const entry = this.data.get(key);
    if (!entry) return undefined;

    if (Date.now() - entry.timestamp > this.ttl) {
      this.data.delete(key);
      return undefined;
    }

    return entry.value;
  }
}

// Usage with different types
const numberCache = new Cache<number>();
const userCache = new Cache<{id: string, name: string}>();

The keyof operator helps create type-safe property lookups when working with generic types.

Solving Common Issues with TypeScript Generics

Working with TypeScript generics can sometimes lead to issues like type inference problems or constraint errors. To solve these, it's important to grasp the basics and use the right syntax. Consider this code with a type constraint error:

function getFirstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

const arr: number[] = [1, 2, 3];
const firstElement = getFirstElement(arr); // Error: Type 'number | undefined' is not assignable to 'number'.

To fix this, you can cast the type using as:

const firstElement = getFirstElement(arr) as number;

Or make the type nullable with ?:

function getFirstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

const arr: number[] = [1, 2, 3];
const firstElement = getFirstElement(arr) as number | undefined;

By understanding these concepts and syntax, you can solve common issues with TypeScript generics and write solid code. Want to learn more about type manipulation? The map type feature helps transform types in more complex scenarios.

Final Thoughts on TypeScript Generics

TypeScript generics help you write flexible, type-safe code. Utility types work hand-in-hand with generics to transform and adapt types as needed. From building reusable React components to creating type-safe data structures, generics are central to TypeScript's type system. Need a deeper dive into generics with Convex operations? Check out Convex's type system guide for practical examples.