Advanced Type Inference Tricks

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

type A = ElementType<string[]>;    // string
type B = ElementType<number[][]>;  // number[]
type C = ElementType<string>;      // never

// Extract from a Promise
type Awaited_<T> = T extends Promise<infer U> ? Awaited_<U> : T;
// (TypeScript has built-in Awaited<T> since 4.5)

type D = Awaited_<Promise<Promise<string>>>;  // string

// Extract function parameter types
type FirstParam<T> = T extends (first: infer F, ...rest: any[]) => any ? F : never;

function greet(name: string, age: number): string { return ''; }
type E = FirstParam<typeof greet>;  // string

// Multiple infer positions
type UnpackPromiseAndArray<T> = T extends Promise<(infer U)[]>
  ? U
  : T extends (infer V)[]
  ? V
  : T;

type F = UnpackPromiseAndArray<Promise<string[]>>;  // string
type G = UnpackPromiseAndArray<number[]>;            // number
type H = UnpackPromiseAndArray<boolean>;             // boolean

// Infer with template literals
type RouteParam<T extends string> =
  T extends `${string}:${infer Param}/${infer Rest}`
    ? Param | RouteParam<`/${Rest}`>
    : T extends `${string}:${infer Param}`
    ? Param
    : never;

type Params = RouteParam<'/users/:userId/posts/:postId'>;
// "userId" | "postId"

// Problem: annotating loses literal types
const palette1: Record<string, string> = {
  red:   '#ff0000',
  green: '#00ff00',
  blue:  '#0000ff',
};

// palette1.red is typed as string, not "#ff0000"
// palette1.purple = '#800080';  // No error! Record<string, string> is too wide

// Problem: 'as' skips type checking
const palette2 = {
  red:   '#ff0000',
  green: 42,  // Bug - should be string!
  blue:  '#0000ff',
} as Record<string, string>;  // No error - 'as' is a cast, not a check

// SOLUTION: satisfies - validates AND preserves literal types
type ColorMap = Record<string, string | [r: number, g: number, b: number]>;

const palette3 = {
  red:   '#ff0000',
  green: [0, 255, 0],    // Also allowed by the type
  blue:  '#0000ff',
  // yellow: 42,          // Error - 42 is not string | [number, number, number]
} satisfies ColorMap;

// palette3.red is typed as "#ff0000" (string literal preserved)
// palette3.green is typed as [0, 255, 0] (tuple preserved)
// palette3.yellow would be a compile error
// palette3.red.toUpperCase() - works because TypeScript knows it's a string

// satisfies is also great for config validation
interface ServerConfig {
  port: number;
  host: string;
  ssl: boolean;
}

const config = {
  port: 3000,    // typed as 3000 (literal), not number
  host: 'localhost',
  ssl: false,
} satisfies ServerConfig;

// config.port is 3000 (literal), useful for conditional logic
type IsDevPort = typeof config.port extends 3000 ? true : false; // true

// Generic defaults - T falls back when it cannot be inferred
function createStore<T = Record<string, unknown>>(initialState?: T) {
  let state: T = initialState ?? ({} as T);

  return {
    get: (): T => state,
    set: (newState: T) => { state = newState; },
  };
}

// Inferred from argument
const store1 = createStore({ count: 0, name: 'app' });
// T is { count: number; name: string }

// Default applies when no argument
const store2 = createStore();
// T is Record<string, unknown> (the default)

// Contextual typing - TypeScript infers from where the function is used
const nums = [1, 2, 3, 4, 5];

// TypeScript knows n is number because Array<number>.filter callback expects (n: number) => boolean
const even = nums.filter(n => n % 2 === 0);  // n inferred as number

// Same for object methods
interface EventMap {
  click: MouseEvent;
  input: InputEvent;
}

function on<K extends keyof EventMap>(
  event: K,
  handler: (e: EventMap[K]) => void
): void {
  document.addEventListener(event, handler as EventListener);
}

// e is inferred as MouseEvent from context
on('click', e => {
  console.log(e.clientX, e.clientY);  // Works - e is MouseEvent
});

// e is inferred as InputEvent from context
on('input', e => {
  console.log(e.data);  // Works - e is InputEvent
});