TS Playground — Find the Bug¶

Practice finding and fixing bugs by pasting each snippet into the TypeScript Playground and using its tabs to diagnose the problem. Many of these bugs are about using the Playground itself (wrong settings, wrong expectations, wrong version) as much as about TypeScript code. Paste each snippet, set the indicated compiler options, and find the issue before reading the solution.

How to Use¶

1. Open the Playground and paste the buggy snippet.
2. Set any compiler options the exercise mentions.
3. Read the Errors tab, the .JS tab, and the Logs tab as clues.
4. Find the bug yourself before expanding the solution.
5. Understand why it happens, not just the fix.

Difficulty Levels¶

Bug 1: "Nothing Logs" 🟢¶

What the code should do: Print the doubled numbers.

const numbers = [1, 2, 3];
const doubled = numbers.map((n) => n * 2);

Expected: Logs tab shows [2, 4, 6]. Actual: Logs tab is empty.

const numbers = [1, 2, 3];
const doubled = numbers.map((n) => n * 2);
console.log(doubled); // then press Run

Bug 2: Reading the Wrong Tab 🟢¶

What the developer believed: "The Playground isn't running my code — the right panel just shows my source again."

console.log("hello");

Bug 3: The Error That Won't Reproduce 🟡¶

What the code should do: Trigger a "possibly null" error like it does in the developer's project.

function firstChar(value: string | null) {
  return value[0]; // expected: error, but none appears
}

function firstChar(value: string | null) {
  if (value === null) return undefined;
  return value[0];
}

Bug 4: Importing an npm Package 🟢¶

What the code should do: Use lodash to chunk an array.

import { chunk } from "lodash";

console.log(chunk([1, 2, 3, 4], 2));

function chunk<T>(arr: T[], size: number): T[][] {
  const result: T[][] = [];
  for (let i = 0; i < arr.length; i += size) {
    result.push(arr.slice(i, i + size));
  }
  return result;
}

console.log(chunk([1, 2, 3, 4], 2));

Bug 5: Type-Checks but Crashes at Run 🔴¶

What the code should do: Validate a string with zod.

import { z } from "zod";

const schema = z.string();
console.log(schema.parse("hello"));

function parseString(value: unknown): string {
  if (typeof value !== "string") throw new Error("Not a string");
  return value;
}

console.log(parseString("hello"));

Bug 6: Node Global at Runtime 🔴¶

What the code should do: Print the current environment.

console.log(process.env.NODE_ENV ?? "development");

// Simulate the value instead of reading a Node global:
const NODE_ENV = "development";
console.log(NODE_ENV);

Bug 7: Lost Narrowing After await 🟡¶

What the code should do: Use value as a string after the null guard.

async function demo(value: string | null) {
  if (value === null) return;
  await Promise.resolve();
  return value.toUpperCase();
}

async function demo(value: string | null) {
  if (value === null) return;
  const v = value; // capture the narrowed value
  await Promise.resolve();
  return v.toUpperCase();
}

Bug 8: Version-Specific Syntax 🔴¶

What the code should do: Use the satisfies operator.

const palette = {
  primary: "#ff0000",
  secondary: "#00ff00",
} satisfies Record<string, string>;

Bug 9: The Shared Link Shows No Error 🟡¶

What happened: A developer shared a link to demonstrate an error, but the recipient saw none.

const arr = [1, 2, 3];
const x = arr[10];
x.toFixed(2); // expected: "possibly undefined" error

Bug 10: Misreading the .D.TS Tab 🟡¶

What the developer believed: "My private helper is leaking — it's in the .D.TS!"

export function publicApi(): number {
  return helper();
}

export function helper(): number {
  return 42;
}

export function publicApi(): number {
  return helper();
}

// No `export` — now absent from the .D.TS
function helper(): number {
  return 42;
}

Bug 11: Expecting Errors to Block Run 🟢¶

What the developer believed: "There's a type error, so my code won't run — that's why my logic is wrong."

let count: number = "five";
console.log(count + 1);

let count: number = 5;
console.log(count + 1); // 6

Bug 12: Wrong target Hides a Feature 🟡¶

What the code should do: Use Array.prototype.at.

const last = [1, 2, 3].at(-1);
console.log(last);

Bug 13: JSX Without .tsx 🟡¶

What the code should do: Render a JSX element.

const element = <div className="box">Hello</div>;

Summary of Lessons¶

Key takeaway: Most "Playground bugs" are really expectation bugs — wrong tab, wrong settings, wrong version, or assuming type-check equals run. Master the settings and the type-check-vs-run distinction and these disappear.