TypeScript Performance Optimization

// Run extended diagnostics
// tsc --extendedDiagnostics

// Sample output:
// Files:                         1,842
// Lines of Library:             37,521
// Lines of Definitions:        118,842
// Lines of TypeScript:         124,205
// Parse time:                    0.97s
// Bind time:                     0.40s
// Check time:                    7.22s   <-- the expensive phase
// transformTime time:            0.14s
// Emit time:                     0.22s
// Total time:                    8.97s

// If "Check time" is very high, you have complex types.
// If "Parse time" is high, you are parsing too many files (check your include glob).

// Generate a trace file for visual analysis
// tsc --generateTrace ./build-trace

// Open chrome://tracing in Chrome, load ./build-trace/trace.json
// Filter by "checkExpression" and "checkType" to see hot spots
// Long bars labeled with type names tell you which types are expensive

// Key metrics to watch in trace:
// - "checkType" events > 100ms on one type: that type is too complex
// - Many small "checkExpression" events: often caused by large unions in hot function

// SLOWER: type alias for object shapes
// Type aliases are re-evaluated at every usage site
type SlowUserA = {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user' | 'guest';
};

type SlowUserB = {
  createdAt: Date;
  updatedAt: Date;
};

// This intersection is re-computed each time it's used
type SlowUser = SlowUserA & SlowUserB;

// FASTER: interface for object shapes
// Interfaces are cached by identity in the type checker
interface FastUserA {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user' | 'guest';
}

interface FastUserB {
  createdAt: Date;
  updatedAt: Date;
}

// Interface extends is faster than type intersection
interface FastUser extends FastUserA, FastUserB {}

// Why: TypeScript interns interfaces - it recognizes FastUser by its
// declared identity, not by structural shape-matching each time.
// Type alias intersections require re-computation at every use site.

// Rule: use 'interface' for object shapes that will be extended or frequently referenced
// Use 'type' for: unions, primitives, mapped types, conditional types

// SLOW: deeply recursive conditional type
// TypeScript must evaluate this up to 50 levels deep for each usage
type DeepReadonly<T> = T extends (infer U)[]
  ? ReadonlyArray<DeepReadonly<U>>
  : T extends object
  ? { readonly [K in keyof T]: DeepReadonly<T[K]> }
  : T;

// For deeply nested objects, this can be very slow.
// Consider limiting depth or using a library that handles this.

// SLOW: large string union distribution
type Events = 'click' | 'focus' | 'blur' | 'input' | 'change' | 'submit'
            | 'keydown' | 'keyup' | 'mouseenter' | 'mouseleave'
            | 'touchstart' | 'touchend' | 'scroll' | 'resize'
            | 'load' | 'unload' | 'error' | 'abort';

// Distributing 18 members through a conditional type = 18 evaluations per usage
type HTMLEvents = Events extends infer E ? E extends string ? `on${Capitalize<string & E>}` : never : never;

// FAST: use mapped type instead of distributive conditional type
type HTMLEventsMap = { [E in Events]: `on${Capitalize<E>}` };
type HTMLEventsFast = HTMLEventsMap[Events];  // Look up all at once

// FAST: use const assertion for fixed data instead of complex inference
const ROLES = ['admin', 'user', 'guest'] as const;
type Role = typeof ROLES[number]; // Derived once, used many times

// FAST: extract repeated type computations to named types
// Instead of writing Pick<User, 'id' | 'name'> everywhere:
type UserSummary = Pick<FastUser, 'id' | 'name'>;
// TypeScript caches the named type; inline writes are re-evaluated each time