typescript-advanced-types

TypeScript Advanced Types

Master TypeScript's advanced type system for building robust, type-safe applications.

Generics

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

// Generic with constraint
interface HasLength { length: number; }

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

// Multiple type parameters
function merge<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

Conditional Types

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

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

// Nested conditions
type TypeName<T> =
  T extends string ? "string" :
  T extends number ? "number" :
  T extends boolean ? "boolean" :
  "object";

Mapped Types

// Make all properties readonly
type Readonly<T> = { readonly [P in keyof T]: T[P] };

// Make all properties optional
type Partial<T> = { [P in keyof T]?: T[P] };

// Key remapping
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};

// Filter by type
type PickByType<T, U> = {
  [K in keyof T as T[K] extends U ? K : never]: T[K]
};

Template Literal Types

type EventName = "click" | "focus" | "blur";
type EventHandler = `on${Capitalize<EventName>}`;
// "onClick" | "onFocus" | "onBlur"

// String manipulation
type Upper = Uppercase<"hello">;      // "HELLO"
type Lower = Lowercase<"HELLO">;      // "hello"
type Cap = Capitalize<"john">;        // "John"

Utility Types

// Built-in utilities
type PartialUser = Partial<User>;              // All optional
type RequiredUser = Required<PartialUser>;      // All required
type ReadonlyUser = Readonly<User>;             // All readonly
type NameEmail = Pick<User, "name" | "email">;  // Select props
type NoPassword = Omit<User, "password">;       // Remove props

type T1 = Exclude<"a" | "b" | "c", "a">;        // "b" | "c"
type T2 = Extract<"a" | "b" | "c", "a" | "b">;  // "a" | "b"
type T3 = NonNullable<string | null>;           // string
type PageInfo = Record<"home" | "about", { title: string }>;