TS Playground — Optimization Guide¶

// BEFORE — huge paste, the live checker stalls on each edit
// (imagine 400 lines of unrelated app code here)
type Unrelated1 = { /* ... */ };
type Unrelated2 = { /* ... */ };
// ...
function theOnlyPartThatMatters(x: number) {
  return x.toUpperCase(); // <- the actual question, buried
}

// AFTER — only the code that demonstrates the behavior
function theOnlyPartThatMatters(x: number) {
  return x.toUpperCase(); // Error: number has no toUpperCase
}

// BEFORE — unbounded recursion over a big shape
type DeepPartial<T> = T extends object
  ? { [K in keyof T]?: DeepPartial<T[K]> }
  : T;

type Huge = Record<string, Record<string, Record<string, number>>>;
type Slow = DeepPartial<Huge>; // many instantiations

// AFTER — bound the recursion depth
type Prev = [never, 0, 1, 2, 3, 4, 5];
type DeepPartial<T, Depth extends number = 4> = Depth extends 0
  ? T
  : T extends object
    ? { [K in keyof T]?: DeepPartial<T[K], Prev[Depth]> }
    : T;

type Fast = DeepPartial<Record<string, Record<string, number>>>;

// BEFORE — hover shows a truncated type
const data = [1, 2, 3].reduce(
  (acc, n) => ({ ...acc, [`k${n}`]: n }),
  {} as Record<string, number>,
);
// hover `data` -> Record<string, number> ... (sometimes abbreviated)

// AFTER — force a full, readable type
const data = [1, 2, 3].reduce(
  (acc, n) => ({ ...acc, [`k${n}`]: n }),
  {} as Record<string, number>,
);
const _reveal: never = data; // the error prints the COMPLETE type

// BEFORE — link created with default settings; recipient sees different results
const value: string | null = null;
value.length; // may or may not error depending on the recipient's defaults

// AFTER — set strict + pin the version BEFORE copying the URL
// Config: strict = true; Version dropdown: 5.4.0
const value: string | null = null;
value.length; // reliably errors for everyone who opens the link

// BEFORE — a screenshot of this in the docs (rots silently, not copyable)
const total = 1 + 2; // type: number

// AFTER — Twoslash renders verified types and asserts errors at build time
const total = 1 + 2;
//    ^? const total: number

// @errors: 2322
const bad: number = "x"; // asserted to error; doc build fails if it stops erroring

// BEFORE — ad hoc settings each time; easy to forget noUncheckedIndexedAccess
const arr = [1, 2, 3];
const first = arr[0];
first.toFixed(); // no error unless the flag is on — easy to miss

// AFTER — save a canonical "team settings" Playground link in the repo
// (strict, noUncheckedIndexedAccess, exactOptionalPropertyTypes, target, lib)
// Start every repro by opening that link, then editing the code.
const arr = [1, 2, 3];
const first = arr[0]; // number | undefined, reliably
first?.toFixed();

// BEFORE — a giant literal union resolved repeatedly
type Hex = `#${string}`;
type ManyColors =
  | "aliceblue" | "antiquewhite" | "aqua" /* ...100+ more... */ | "yellowgreen";

function setColor(c: ManyColors | Hex) {}

// AFTER — collapse to a structural type when the exact members are not needed
type Hex = `#${string}`;
type Color = Hex | (string & {}); // accept named colors as strings, keep hints

function setColor(c: Color) {}

// BEFORE — large type alias
type Config = {
  server: { host: string; port: number };
  db: { url: string; poolSize: number };
  flags: { debug: boolean; verbose: boolean };
};

// AFTER — interface (often faster to check, mergeable, cleaner errors)
interface Config {
  server: { host: string; port: number };
  db: { url: string; poolSize: number };
  flags: { debug: boolean; verbose: boolean };
}

// BEFORE — inline instantiation recomputed at each use
function parse<T>(input: T): { [K in keyof T]: T[K] extends string ? number : T[K] } {
  return input as any;
}

// AFTER — named alias the checker can cache
type Parsed<T> = { [K in keyof T]: T[K] extends string ? number : T[K] };

function parse<T>(input: T): Parsed<T> {
  return input as unknown as Parsed<T>;
}

// BEFORE — looks runnable, but Run throws: z is not defined
import { z } from "zod";
const schema = z.string();
console.log(schema.parse("hi"));

// AFTER — inline the tiny behavior so the demo actually runs
function parseString(value: unknown): string {
  if (typeof value !== "string") throw new Error("Not a string");
  return value;
}
console.log(parseString("hi")); // runs and logs "hi"

// BEFORE — trying to force a multi-file, package-heavy app into the Playground
import express from "express"; // fails
// ...attempting routes, middleware, etc.

// AFTER — recognize the constraint and switch tools
// - Real packages / multi-file  -> StackBlitz or CodeSandbox
// - Node APIs / real build       -> local tsc + editor
// - Single-file type question    -> stay in the Playground
const decision = "match the tool to the constraint";

// BEFORE — unbounded path-building type can explode or hit depth limits
type Paths<T> = T extends object
  ? { [K in keyof T & string]: K | `${K}.${Paths<T[K]> & string}` }[keyof T & string]
  : never;

// AFTER — cap depth with a counter so it terminates quickly
type Prev = [never, 0, 1, 2, 3];
type Paths<T, D extends number = 3> = D extends 0
  ? never
  : T extends object
    ? {
        [K in keyof T & string]:
          | K
          | `${K}.${Paths<T[K], Prev[D]> & string}`;
      }[keyof T & string]
    : never;

// BEFORE — readers see boilerplate they do not care about
interface User {
  id: string;
  name: string;
  email: string;
}
declare function fetchUser(id: string): Promise<User>;

const user = await fetchUser("1");
user.name.toUpperCase(); // <- the only line that matters

// AFTER — hide the setup above the cut; only the relevant code renders
interface User {
  id: string;
  name: string;
  email: string;
}
declare function fetchUser(id: string): Promise<User>;
// ---cut---
const user = await fetchUser("1");
user.name.toUpperCase(); // the rendered example starts here

// BEFORE — any disables checking; the Playground can't catch the real bug
function parse(input: any) {
  return input.data.items.map((x: any) => x.value);
}
const result = parse("not json"); // no error, crashes at Run

// AFTER — use unknown and narrow; the Playground guides you to safety
function parse(input: unknown): number[] {
  if (
    typeof input === "object" &&
    input !== null &&
    "items" in input &&
    Array.isArray((input as { items: unknown }).items)
  ) {
    return (input as { items: { value: number }[] }).items.map((x) => x.value);
  }
  throw new Error("Invalid input");
}

// BEFORE — full DOM + every ES lib loaded for a pure-logic snippet
function sum(a: number, b: number) {
  return a + b;
}

// AFTER — for a pure-logic demo, a leaner lib (no DOM) checks marginally faster
// Config: lib = ["ES2022"] (drop DOM when document/window are unused)
function sum(a: number, b: number) {
  return a + b;
}

// Quick A/B: paste the heavy type, note the lag; paste the bounded version,
// note the improvement. The genuine checker makes this a faithful comparison.
type Prev = [never, 0, 1, 2, 3];
type BoundedReadonly<T, D extends number = 3> = D extends 0
  ? T
  : { readonly [K in keyof T]: T[K] extends object ? BoundedReadonly<T[K], Prev[D]> : T[K] };

// BEFORE sharing, ask:
// 1. Is the snippet minimal? (delete unrelated code)
// 2. Are the strict flags set to match the target environment?
// 3. Is the TS version pinned?
// 4. Is the line that matters marked with a comment?
// 5. Does it type-check (and run, if it claims to be runnable)?
// 6. If it uses a recursive/conditional type, is the depth bounded?
const ready = "all six checks passed";

// BEFORE — one giant example trying to teach five concepts at once
// (narrowing + generics + mapped types + conditional types + JSX) — overwhelming.

// AFTER — five tiny, single-concept Playgrounds, each pinned and runnable.
type OneConceptPerLink = "narrowing"; // one idea, one link, one hover to inspect

// BEFORE — one unreadable, expensive expression
function build<T>(x: T): { [K in keyof T]: T[K] extends string ? `${T[K]}!` : T[K] } {
  return x as any;
}

// AFTER — named steps: readable AND the checker can cache each alias
type Exclaim<V> = V extends string ? `${V}!` : V;
type Built<T> = { [K in keyof T]: Exclaim<T[K]> };

function build<T>(x: T): Built<T> {
  return x as unknown as Built<T>;
}

// BEFORE — vague, settings-dependent, version-ambiguous
function f(x) {
  return x.y;
}

// AFTER — pinned, flagged, marked, self-contained
// @strict: true   (set in the config menu; version pinned in the dropdown)
function getY(obj: { y: number } | null): number {
  return obj.y; // <- claim: should error under strict because obj may be null
}