Compiler Options — Find the Bug¶

Practice finding and fixing bugs caused by a wrong or missing compiler option. Each exercise ships code that compiles or runs incorrectly because of a compilerOptions setting. Your job: identify the missing/wrong flag, explain why it causes the bug, and fix the config (or code).

How to Use¶

1. Read the code and the config.
2. Find the flag-related bug without the hint.
3. Decide whether the right fix is a config change, a code change, or both.
4. Understand why the option changes the outcome.

Difficulty Levels¶

Bug 1: Null Slips Through 🟢¶

What it should do: Reject a null argument where a string is required.

// tsconfig: { "compilerOptions": { "target": "ES2022" } }

function slug(title: string): string {
  return title.trim().toLowerCase().replace(/\s+/g, "-");
}

slug(null); // compiles! crashes at runtime: Cannot read properties of null

{ "compilerOptions": { "target": "ES2022", "strict": true } }

Bug 2: document Is Undefined in the Browser Build 🟢¶

What it should do: Use the DOM in a front-end file.

// tsconfig: { "compilerOptions": { "target": "ES2022", "lib": ["ES2022"] } }

const app = document.getElementById("app");
//          ~~~~~~~~ Error: Cannot find name 'document'.

{ "compilerOptions": { "target": "ES2022", "lib": ["ES2022", "DOM", "DOM.Iterable"] } }

Bug 3: Output Lands Next to Source 🟢¶

What it should do: Put compiled JS in dist/, keeping src/ clean.

// tsconfig.json
{
  "compilerOptions": { "target": "ES2022", "strict": true },
  "include": ["src/**/*"]
}

After tsc, every src/foo.ts produced a src/foo.js next to it. The dist/ folder is empty.

{
  "compilerOptions": {
    "target": "ES2022", "strict": true,
    "rootDir": "./src", "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

Bug 4: Cannot use import statement outside a module 🟡¶

What it should do: Run a compiled Node app.

// tsconfig.json
{ "compilerOptions": { "target": "ES2022", "module": "ESNext", "strict": true, "outDir": "dist" } }

// package.json — note: no "type" field (defaults to commonjs)
{ "name": "app", "main": "dist/index.js" }

node dist/index.js
# SyntaxError: Cannot use import statement outside a module

{ "compilerOptions": { "target": "ES2022", "module": "NodeNext", "moduleResolution": "NodeNext", "strict": true, "outDir": "dist" } }

Bug 5: Default Import of a CommonJS Package Is Not a Function 🟡¶

What it should do: Import and call express.

// tsconfig: { "compilerOptions": { "module": "CommonJS", "strict": true } }

import express from "express";
const app = express(); // Runtime: express is not a function (or a type error)

{ "compilerOptions": { "module": "CommonJS", "strict": true, "esModuleInterop": true } }

Bug 6: Array Access Crashes Despite "Type Safety" 🟡¶

What it should do: Safely read the first matching item.

// tsconfig: { "compilerOptions": { "strict": true } }

function firstEven(nums: number[]): number {
  const evens = nums.filter((n) => n % 2 === 0);
  return evens[0].valueOf(); // crashes when there are no evens
}

firstEven([1, 3, 5]); // TypeError: Cannot read properties of undefined

{ "compilerOptions": { "strict": true, "noUncheckedIndexedAccess": true } }

function firstEven(nums: number[]): number | undefined {
  const evens = nums.filter((n) => n % 2 === 0);
  const head = evens[0];
  return head?.valueOf();
}

Bug 7: catch Assumes Every Throw Is an Error 🟡¶

What it should do: Log a caught error's message safely.

// tsconfig: { "compilerOptions": { "strictNullChecks": true } } // note: not full strict

function run() {
  try {
    risky();
  } catch (e) {
    console.log(e.message.toUpperCase()); // e is 'any' here — unsafe
  }
}

If risky() throws a string, e.message is undefined and this crashes.

{ "compilerOptions": { "strict": true } }

catch (e) {
  if (e instanceof Error) console.log(e.message.toUpperCase());
  else console.log("Non-error thrown:", e);
}

Bug 8: { x: undefined } Sneaks Past an Optional Field 🟡¶

What it should do: Treat a missing field differently from an explicit undefined (the code uses "x" in obj).

// tsconfig: { "compilerOptions": { "strict": true } }

interface Patch { name?: string }

function apply(patch: Patch) {
  if ("name" in patch) {
    setName(patch.name!); // assumes presence means a real value
  }
}

apply({ name: undefined }); // "name" in patch is true, but value is undefined → bug

{ "compilerOptions": { "strict": true, "exactOptionalPropertyTypes": true } }

Bug 9: const enum Breaks Under esbuild 🔴¶

What it should do: Build with esbuild for production; type-check with tsc.

// colors.ts
export const enum Color { Red, Green, Blue }

// usage.ts
import { Color } from "./colors";
console.log(Color.Green); // tsc inlines to 1; esbuild emits a runtime reference that is undefined

// tsconfig: { "compilerOptions": { "strict": true, "noEmit": true } }

The tsc check is green, but the esbuild bundle throws because Color has no runtime value.

{ "compilerOptions": { "strict": true, "noEmit": true, "isolatedModules": true } }

Bug 10: Type-Only Re-export Drops a Value at Runtime 🔴¶

What it should do: Re-export both a type and a function from a barrel file, compiled by a bundler.

// index.ts
export { User, createUser } from "./user";
//        ^type   ^value

// tsconfig: { "compilerOptions": { "module": "ESNext", "moduleResolution": "bundler", "strict": true, "noEmit": true } }

tsc is green, but the bundler emits an import for User (a type), causing a runtime "User is not exported" error — or, with type-directed elision off, the wrong thing is kept.

{
  "compilerOptions": {
    "module": "ESNext", "moduleResolution": "bundler",
    "strict": true, "noEmit": true,
    "isolatedModules": true, "verbatimModuleSyntax": true
  }
}

export type { User } from "./user";
export { createUser } from "./user";

Bug 11: Set Iteration Returns Nothing on ES5 🔴¶

What it should do: Iterate a Set while targeting ES5.

// tsconfig: { "compilerOptions": { "target": "ES5", "lib": ["ES2015", "DOM"] } }

const ids = new Set([10, 20, 30]);
for (const id of ids) {
  console.log(id); // on the emitted ES5 code, behaves incorrectly
}

{ "compilerOptions": { "target": "ES5", "lib": ["ES2015", "DOM"], "downlevelIteration": true } }

Bug 12: DI Framework Gets undefined Parameter Types 🔴¶

What it should do: Let NestJS/TypeORM read constructor parameter types for injection.

// tsconfig: { "compilerOptions": { "experimentalDecorators": true, "strict": true } }

@Injectable()
class UserService {
  constructor(private readonly repo: UserRepository) {}
}
// At runtime the framework cannot resolve `repo` — its design type is missing.

{ "compilerOptions": { "experimentalDecorators": true, "emitDecoratorMetadata": true, "strict": true } }

Bug 13: Class Field Shadows a Base Setter 🔴¶

What it should do: Let a base-class setter run when the subclass declares the same property.

// tsconfig: { "compilerOptions": { "target": "ES2022", "strict": true } }

class Base {
  private _name = "";
  set name(v: string) { this._name = v.trim(); }
  get name() { return this._name; }
}

class Derived extends Base {
  name = "  Ada  "; // expected: setter trims to "Ada"
}

console.log(new Derived().name); // logs "  Ada  " — setter never ran

{ "compilerOptions": { "target": "ES2022", "strict": true, "useDefineForClassFields": false } }

Score Card¶

Rating¶

• 13/13 without hints — You can diagnose compiler-option bugs from symptoms alone.
• 9-12 — Strong senior grasp of strictness and interop flags.
• 5-8 — Solid middle; review the strict family and bundler interop flags.
• < 5 — Re-read middle.md and professional.md.

Flag-to-Bug Map¶