Quiz: Type or Error?

Test Your TypeScript Intuition

Time to put your knowledge on the line. Each question shows a TypeScript snippet with strict: true. Your job: does it compile, or does the compiler reject it? Don't just guess — trace the types step by step using structural typing, narrowing, and inference rules.

If you score below 7, go revisit the essentials topics. If you get all 10, you genuinely understand TypeScript's type system better than most working developers.

---

Question 1: Structural Compatibility

interface Cat { purr(): void }
interface Dog { bark(): void }

const cat: Cat = { purr() {}, bark() {} };

---

Question 2: Union Narrowing

function process(value: string | number) {
  if (typeof value === "object") {
    return value.toFixed(2);
  }
  return value;
}

---

Question 3: Literal Widening

const config = {
  mode: "production",
  port: 3000,
};

function setMode(mode: "development" | "production") {}
setMode(config.mode);

---

Question 4: Generic Constraint

function merge<T extends object, U extends object>(a: T, b: U): T & U {
  return { ...a, ...b };
}

const result = merge({ x: 1 }, { y: "hello" });
result.x; // number
result.y; // string

---

Question 5: Discriminated Union Exhaustion

type Shape = { kind: "circle"; r: number } | { kind: "square"; s: number };

function area(shape: Shape): number {
  if (shape.kind === "circle") return Math.PI * shape.r ** 2;
  return shape.s ** 2;
}

---

Question 6: Index Access on Union

type A = { x: number; y: string };
type B = { x: boolean; z: number };

type X = (A | B)["x"];

---

Question 7: Conditional Type Distribution

type IsString<T> = T extends string ? "yes" : "no";
type Result = IsString<string | number>;

---

Question 8: Readonly Assignment

interface Config {
  readonly host: string;
  readonly port: number;
}

const config: Config = { host: "localhost", port: 3000 };

const mutable = { host: "localhost", port: 3000 };
const config2: Config = mutable;
mutable.host = "production";

---

Question 9: Optional vs Undefined

interface A { x?: number }
interface B { x: number | undefined }

const a: A = {};         // Is this valid?
const b: B = {};         // Is this valid?

---

Question 10: Generic Return Narrowing

function createPair<T>(first: T, second: T): [T, T] {
  return [first, second];
}

const pair = createPair(1, "hello");

---

Scoring Guide