Fix INP in TypeScript: Reduce Interaction Latency in Type-Safe Codebases

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "strict": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "isolatedModules": true,
    "verbatimModuleSyntax": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": false,
    "importHelpers": true,
    "useDefineForClassFields": true
  }
}

npm install tslib
# or
pnpm add tslib
# or
yarn add tslib

// event-handler.ts
async function handleClick(event: MouseEvent): Promise<void> {
  const data = await fetchData();
  updateUI(data);
}

// TypeScript ES5 output inlines ~50 lines of __awaiter/__generator
// into every file that uses async/await

// event-handler.ts
// ES2022 output: async/await is emitted verbatim
// No __awaiter, no __generator. The engine runs native microtask scheduling.
async function handleClick(event: MouseEvent): Promise<void> {
  const data = await fetchData();
  updateUI(data);
}

// Bundled output is ~80% smaller for async-heavy files.
// V8 can optimize native async/await with its FastAsync optimization path.

// Source
@Injectable()
class UserService {
  constructor(private http: HttpClient) {}
}

// Emitted JS with emitDecoratorMetadata: true
// The Reflect.metadata calls execute synchronously at module load
UserService = __decorate([
  Injectable(),
  __metadata("design:paramtypes", [HttpClient])
], UserService);

// With emitDecoratorMetadata: false, only the decorator call runs
UserService = __decorate([Injectable()], UserService);

// Before: bundler may keep this import alive at runtime
import { HeavyDataProcessor } from './processors/heavy';

function processEvent(event: MouseEvent): void {
  const processor: HeavyDataProcessor = getProcessor(); // type-only usage
  processor.run(event.target);
}

// After: explicit type import — bundler elides it with zero runtime cost
import type { HeavyDataProcessor } from './processors/heavy';

function processEvent(event: MouseEvent): void {
  const processor: HeavyDataProcessor = getProcessor();
  processor.run(event.target);
}

// Class hierarchy — V8 sees megamorphic call sites in dispatch()
abstract class UIAction {
  abstract execute(state: AppState): AppState;
}

class SelectItemAction extends UIAction {
  constructor(public readonly id: string) { super(); }
  execute(state: AppState): AppState {
    return { ...state, selectedId: this.id };
  }
}

class FilterAction extends UIAction {
  constructor(public readonly query: string) { super(); }
  execute(state: AppState): AppState {
    return { ...state, filter: this.query };
  }
}

class SortAction extends UIAction {
  constructor(public readonly field: string, public readonly dir: 'asc' | 'desc') { super(); }
  execute(state: AppState): AppState {
    return { ...state, sortField: this.field, sortDir: this.dir };
  }
}

// Handler fires on every keystroke — polymorphic, hard for V8 to optimize
function handleAction(action: UIAction, state: AppState): AppState {
  return action.execute(state); // megamorphic call site
}

// Discriminated union — V8 optimizes the switch to a jump table
type UIAction =
  | { type: 'SELECT_ITEM'; id: string }
  | { type: 'FILTER'; query: string }
  | { type: 'SORT'; field: string; dir: 'asc' | 'desc' };

// Fully type-safe: TypeScript narrows the union in each case branch.
// Runtime: V8 compiles this to a monomorphic branch chain or jump table.
function handleAction(action: UIAction, state: AppState): AppState {
  switch (action.type) {
    case 'SELECT_ITEM':
      return { ...state, selectedId: action.id };
    case 'FILTER':
      return { ...state, filter: action.query };
    case 'SORT':
      return { ...state, sortField: action.field, sortDir: action.dir };
  }
}

// TypeScript enforces exhaustiveness. Add a never-guard if needed:
// default: { const _: never = action; return state; }

import { useVirtualizer } from '@tanstack/react-virtual';

type ListRow =
  | { kind: 'text'; content: string; id: string }
  | { kind: 'image'; src: string; alt: string; id: string }
  | { kind: 'separator'; label: string; id: string };

function VirtualList({ rows }: { rows: ListRow[] }) {
  const parentRef = React.useRef<HTMLDivElement>(null);

  const virtualizer = useVirtualizer({
    count: rows.length,
    getScrollElement: () => parentRef.current,
    estimateSize: (index) => {
      // Discriminated union lets us size rows without class instanceof checks
      const row = rows[index];
      switch (row.kind) {
        case 'text': return 48;
        case 'image': return 200;
        case 'separator': return 32;
      }
    },
    overscan: 5,
  });

  return (
    <div ref={parentRef} style={{ height: '600px', overflow: 'auto' }}>
      <div style={{ height: virtualizer.getTotalSize() }}>
        {virtualizer.getVirtualItems().map((virtualItem) => {
          const row = rows[virtualItem.index];
          return (
            <div key={row.id} style={{ transform: `translateY(${virtualItem.start}px)` }}>
              {renderRow(row)}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function renderRow(row: ListRow): React.ReactNode {
  switch (row.kind) {
    case 'text': return <TextRow content={row.content} />;
    case 'image': return <ImageRow src={row.src} alt={row.alt} />;
    case 'separator': return <SeparatorRow label={row.label} />;
  }
}

// src/types/scheduler.d.ts
// Extends the global Scheduler interface with the yield() method.
// Remove this file once TypeScript ships official lib.dom types for it.

export {};

declare global {
  interface SchedulerYieldOptions {
    signal?: AbortSignal | 'inherit';
  }

  interface Scheduler {
    yield(options?: SchedulerYieldOptions): Promise<void>;
  }

  // scheduler is already declared in lib.dom.d.ts for postTask;
  // this augmentation adds yield() without redeclaring the variable.
}

// Process a large filtered dataset on user input without blocking the frame.
// The yieldToMain() helper provides a fallback for browsers without scheduler.yield.

async function yieldToMain(): Promise<void> {
  if ('scheduler' in globalThis && typeof scheduler.yield === 'function') {
    return scheduler.yield();
  }
  return new Promise<void>((resolve) => setTimeout(resolve, 0));
}

async function handleFilterInput(query: string, items: Item[]): Promise<void> {
  const CHUNK_SIZE = 200;
  const results: Item[] = [];

  for (let i = 0; i < items.length; i += CHUNK_SIZE) {
    const chunk = items.slice(i, i + CHUNK_SIZE);

    for (const item of chunk) {
      if (matchesQuery(item, query)) {
        results.push(item);
      }
    }

    // Yield after each chunk. The browser can commit a frame and process
    // any subsequent keystrokes before we continue filtering.
    if (i + CHUNK_SIZE < items.length) {
      await yieldToMain();
    }
  }

  renderFilteredResults(results);
}

// Wire to input event with debounce to avoid redundant work
const debouncedFilter = debounce((e: Event) => {
  const query = (e.target as HTMLInputElement).value;
  handleFilterInput(query, allItems);
}, 50);

// Before: const enum breaks isolatedModules across files
// Do NOT use this when your bundler uses per-file transpilation
const enum KeyCode {
  Enter = 13,
  Escape = 27,
  Space = 32,
}

// After option A: regular enum (safe with isolatedModules, small runtime object)
enum KeyCode {
  Enter = 13,
  Escape = 27,
  Space = 32,
}

// After option B: as const object (zero runtime overhead, tree-shakeable)
const KeyCode = {
  Enter: 13,
  Escape: 27,
  Space: 32,
} as const;

type KeyCode = typeof KeyCode[keyof typeof KeyCode];

// After option C: string literal union (preferred for interaction events)
type InteractionKey = 'Enter' | 'Escape' | ' ';

function handleKeyDown(event: KeyboardEvent): void {
  const key = event.key as InteractionKey;
  switch (key) {
    case 'Enter': confirmSelection(); break;
    case 'Escape': cancelSelection(); break;
    case ' ': toggleSelection(); break;
  }
}