TypeScript Generics Basics Guide

Generics allow you to create reusable components that work with multiple types while maintaining type safety.

Basic Generic Syntax#

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

// TypeScript infers the type
identity('hello');  // T is string
identity(42);       // T is number
identity(true);     // T is boolean

// Explicit type argument
identity<string>('hello');
identity<number>(42);

// Generic arrow function
const identityArrow = <T>(value: T): T => value;

// Note: In JSX files, use trailing comma
const identityJSX = <T,>(value: T): T => value;

Generic Functions#

// Swap function
function swap<T, U>(pair: [T, U]): [U, T] {
  return [pair[1], pair[0]];
}

swap([1, 'hello']);  // [string, number]
swap(['a', true]);   // [boolean, string]

// First element
function first<T>(array: T[]): T | undefined {
  return array[0];
}

first([1, 2, 3]);      // number | undefined
first(['a', 'b']);     // string | undefined

// Map function
function map<T, U>(array: T[], fn: (item: T) => U): U[] {
  return array.map(fn);
}

map([1, 2, 3], n => n.toString());  // string[]
map(['a', 'b'], s => s.length);     // number[]

Generic Interfaces#

// Generic interface
interface Container<T> {
  value: T;
  getValue(): T;
}

const stringContainer: Container<string> = {
  value: 'hello',
  getValue() { return this.value; }
};

const numberContainer: Container<number> = {
  value: 42,
  getValue() { return this.value; }
};

// Generic interface with methods
interface Repository<T> {
  getById(id: string): T | undefined;
  getAll(): T[];
  save(item: T): void;
  delete(id: string): boolean;
}

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

class UserRepository implements Repository<User> {
  private users: User[] = [];

  getById(id: string): User | undefined {
    return this.users.find(u => u.id === id);
  }

  getAll(): User[] {
    return [...this.users];
  }

  save(user: User): void {
    this.users.push(user);
  }

  delete(id: string): boolean {
    const index = this.users.findIndex(u => u.id === id);
    if (index >= 0) {
      this.users.splice(index, 1);
      return true;
    }
    return false;
  }
}

Generic Classes#

class Box<T> {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }

  setValue(value: T): void {
    this.value = value;
  }
}

const stringBox = new Box('hello');
stringBox.getValue();  // string

const numberBox = new Box(42);
numberBox.getValue();  // number

// Multiple type parameters
class Pair<T, U> {
  constructor(
    public first: T,
    public second: U
  ) {}

  swap(): Pair<U, T> {
    return new Pair(this.second, this.first);
  }
}

const pair = new Pair('hello', 42);
const swapped = pair.swap();  // Pair<number, string>

Generic Constraints#

// Constrain to types with length
interface HasLength {
  length: number;
}

function logLength<T extends HasLength>(item: T): number {
  console.log(item.length);
  return item.length;
}

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

// Constrain to object types
function merge<T extends object, U extends object>(a: T, b: U): T & U {
  return { ...a, ...b };
}

merge({ name: 'John' }, { age: 30 });
// merge('hello', 'world');  // Error

// Constrain to keys of another type
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: 'John', age: 30 };
getProperty(user, 'name');  // string
getProperty(user, 'age');   // number
// getProperty(user, 'email'); // Error - 'email' not in keyof user

Default Type Parameters#

// Default type
interface ApiResponse<T = unknown> {
  data: T;
  status: number;
  message: string;
}

// Uses default (unknown)
const response1: ApiResponse = {
  data: 'anything',
  status: 200,
  message: 'OK'
};

// Explicit type
const response2: ApiResponse<User> = {
  data: { id: '1', name: 'John' },
  status: 200,
  message: 'OK'
};

// Multiple defaults
interface Config<T = string, U = number> {
  value: T;
  count: U;
}

const config1: Config = { value: 'hello', count: 5 };
const config2: Config<boolean> = { value: true, count: 5 };
const config3: Config<boolean, string> = { value: true, count: 'five' };

Generic Type Aliases#

// Simple alias
type Nullable<T> = T | null;
type Optional<T> = T | undefined;

const name: Nullable<string> = null;
const age: Optional<number> = undefined;

// Array wrapper
type ArrayOf<T> = T[];
const numbers: ArrayOf<number> = [1, 2, 3];

// Object with value
type ValueHolder<T> = { value: T };
const holder: ValueHolder<string> = { value: 'hello' };

// Function type
type Mapper<T, U> = (item: T) => U;
const toString: Mapper<number, string> = n => n.toString();

// Conditional generic
type NonNullable<T> = T extends null | undefined ? never : T;
type Result = NonNullable<string | null>;  // string

Generic Utility Types#

// Built-in utility types use generics

// Partial - make all properties optional
interface User {
  id: string;
  name: string;
  email: string;
}

type PartialUser = Partial<User>;
// { id?: string; name?: string; email?: string }

// Required - make all properties required
interface Config {
  host?: string;
  port?: number;
}

type RequiredConfig = Required<Config>;
// { host: string; port: number }

// Pick - select specific properties
type UserName = Pick<User, 'name'>;
// { name: string }

// Omit - exclude specific properties
type UserWithoutId = Omit<User, 'id'>;
// { name: string; email: string }

// Record - create object type with keys
type Roles = 'admin' | 'user' | 'guest';
type RolePermissions = Record<Roles, string[]>;
// { admin: string[]; user: string[]; guest: string[] }

Generic Functions with Objects#

// Create object from entries
function fromEntries<K extends string, V>(
  entries: [K, V][]
): Record<K, V> {
  return Object.fromEntries(entries) as Record<K, V>;
}

const obj = fromEntries([
  ['name', 'John'],
  ['city', 'Boston']
]);
// { name: string; city: string }

// Pick properties
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;
}

const user = { id: 1, name: 'John', email: 'john@example.com' };
const nameOnly = pick(user, ['name']);
// { name: string }

Generic React Components#

// Generic list component
interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>({ items, renderItem }: ListProps<T>) {
  return <ul>{items.map(renderItem)}</ul>;
}

// Usage
<List
  items={[{ id: 1, name: 'John' }]}
  renderItem={user => <li key={user.id}>{user.name}</li>}
/>

// Generic select component
interface SelectProps<T> {
  options: T[];
  value: T;
  onChange: (value: T) => void;
  getLabel: (option: T) => string;
  getValue: (option: T) => string;
}

function Select<T>({ options, value, onChange, getLabel, getValue }: SelectProps<T>) {
  return (
    <select
      value={getValue(value)}
      onChange={e => {
        const selected = options.find(o => getValue(o) === e.target.value);
        if (selected) onChange(selected);
      }}
    >
      {options.map(option => (
        <option key={getValue(option)} value={getValue(option)}>
          {getLabel(option)}
        </option>
      ))}
    </select>
  );
}

Common Patterns#

// Factory function
function createStore<T>(initial: T) {
  let state = initial;

  return {
    get: () => state,
    set: (value: T) => { state = value; },
    update: (updater: (current: T) => T) => {
      state = updater(state);
    }
  };
}

const numberStore = createStore(0);
numberStore.set(5);
numberStore.update(n => n + 1);

// Builder pattern
class QueryBuilder<T> {
  private query: Partial<T> = {};

  where<K extends keyof T>(key: K, value: T[K]): this {
    this.query[key] = value;
    return this;
  }

  build(): Partial<T> {
    return { ...this.query };
  }
}

interface User {
  name: string;
  age: number;
  active: boolean;
}

const query = new QueryBuilder<User>()
  .where('name', 'John')
  .where('active', true)
  .build();

Best Practices#

Naming Conventions:
✓ T for single type parameter
✓ K for key type
✓ V for value type
✓ Descriptive names for complex cases

Constraints:
✓ Use extends for constraints
✓ Prefer specific constraints
✓ Document constraint requirements
✓ Use keyof for property access

Design:
✓ Start simple, add generics when needed
✓ Let TypeScript infer when possible
✓ Use defaults for common cases
✓ Keep type parameters minimal

Avoid:
✗ Unnecessary generics
✗ Too many type parameters
✗ Overly complex constraints
✗ Any as escape hatch

Generics are fundamental to TypeScript for creating reusable, type-safe code. Start with simple type parameters and add constraints as needed. Use built-in utility types like Partial, Pick, and Record to transform types. Let TypeScript infer types when possible, and provide explicit type arguments only when necessary for clarity or disambiguation.