typescript-advanced

TypeScript Advanced Types

Comprehensive guidance for TypeScript's advanced type system.

When to Use This Skill

• Building type-safe libraries or APIs
• Creating reusable generic components
• Implementing complex type inference logic
• Designing type-safe state management
• Migrating JavaScript to TypeScript
• Working with complex domain models
• Creating compile-time validation

Core Patterns

1. Generics

Basic Generic Function:

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

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

Generic Constraints:

interface HasLength {
  length: number;
}

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

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

Multiple Type Parameters:

function merge<T extends object, U extends object>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

const merged = merge({ name: "John" }, { age: 30 });
// Type: { name: string } & { age: number }

2. Conditional Types

Basic Conditional Type:

type IsString<T> = T extends string ? true : false;

type A = IsString<string>;    // true
type B = IsString<number>;    // false

Extracting Types with infer:

// Extract return type
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

// Extract array element type
type ElementType<T> = T extends (infer E)[] ? E : never;

// Extract promise type
type Awaited<T> = T extends Promise<infer U> ? Awaited<U> : T;

function getUser() {
  return { id: 1, name: "John" };
}

type User = ReturnType<typeof getUser>;
// Type: { id: number; name: string }

Distributive Conditional Types:

type ToArray<T> = T extends any ? T[] : never;

type StrOrNumArray = ToArray<string | number>;
// Type: string[] | number[] (distributed)