typescript-patterns

When to Use

Apply when writing TypeScript code requiring type safety, utility types, discriminated unions, or generic patterns.

Patterns

Pattern 1: Discriminated Unions

// Source: https://www.typescriptlang.org/docs/handbook/2/narrowing.html
type Result<T> =
  | { success: true; data: T }
  | { success: false; error: string };

function handle<T>(result: Result<T>) {
  if (result.success) {
    console.log(result.data); // T - narrowed
  } else {
    console.log(result.error); // string - narrowed
  }
}

Pattern 2: Utility Types

// Source: https://www.typescriptlang.org/docs/handbook/utility-types.html
interface User {
  id: string;
  name: string;
  email: string;
}

type CreateUser = Omit<User, 'id'>;           // { name, email }
type UpdateUser = Partial<Omit<User, 'id'>>;  // { name?, email? }
type UserKeys = keyof User;                    // 'id' | 'name' | 'email'
type ReadonlyUser = Readonly<User>;           // all props readonly

Pattern 3: Generic Constraints

// Source: https://www.typescriptlang.org/docs/handbook/2/generics.html
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: 'John', age: 30 };
const name = getProperty(user, 'name'); // string

Pattern 4: Type Guards

// Source: https://www.typescriptlang.org/docs/handbook/2/narrowing.html
function isString(value: unknown): value is string {
  return typeof value === 'string';
}

function process(value: unknown) {
  if (isString(value)) {
    console.log(value.toUpperCase()); // value is string
  }
}

Pattern 5: Mapped Types

// Source: https://www.typescriptlang.org/docs/handbook/2/mapped-types.html
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

interface Person { name: string; age: number; }
type PersonGetters = Getters<Person>;
// { getName: () => string; getAge: () => number; }

Pattern 6: const Assertions

// Source: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html
const routes = ['home', 'about', 'contact'] as const;
type Route = typeof routes[number]; // 'home' | 'about' | 'contact'

const config = { env: 'prod', port: 3000 } as const;
// { readonly env: 'prod'; readonly port: 3000; }

Anti-Patterns

• any type - Use unknown and narrow with type guards
• Type assertions (as) - Prefer type guards for runtime safety
• Overly complex generics - Simplify; readability > cleverness
• Missing strict mode - Enable in tsconfig.json

Verification Checklist

• strict: true in tsconfig.json
• No any without justification
• Type guards for runtime checks
• Utility types used over manual definitions
• Generics have constraints where needed