Practice Ground

JS And TS Comparison Drills

Load handbook-linked prompts that show the same idea in JavaScript and TypeScript side by side. Use these before interviews to explain runtime behavior, type modeling, and console-output safety clearly.

Handbook Output Preset

Collections Transform

Compare how JavaScript and TypeScript express the same array transformation, output shape, and failure case.

Q389Q395Q421

JavaScript

Runtime-first version

const orders = [
  { id: "A-1", total: 48, status: "paid" },
  { id: "A-2", total: 19, status: "draft" },
  { id: "A-3", total: 72, status: "paid" },
];

const paidOrderIds = orders
  .filter((order) => order.status === "paid")
  .map((order) => order.id);

console.log("Paid orders:", paidOrderIds);

TypeScript

Typed version

type Order = {
  id: string;
  total: number;
  status: "paid" | "draft";
};

const orders: Order[] = [
  { id: "A-1", total: 48, status: "paid" },
  { id: "A-2", total: 19, status: "draft" },
  { id: "A-3", total: 72, status: "paid" },
];

const paidOrderIds = orders
  .filter((order) => order.status === "paid")
  .map((order) => order.id);

console.log("Paid orders:", paidOrderIds);