TypeScript Interview Questions

TypeScript interview map for frontend engineers — narrowing, unions, generics, React props, and practical type puzzles.

intermediate4 min readUpdated Aug 4, 2026

interview
typescript-interview

TypeScript interviews for FE roles check whether you model UI state safely, not whether you can write Turing-complete types. Prefer clarity over type gymnastics — but know the tools.

Start: TypeScript for JS engineers.

What interviewers score

Narrowing — make illegal states unrepresentable
Unions & exhaustiveness
Generics for reusable components/hooks
React typing — props, events, children
Pragmatism — when to simplify; avoid any

Core language table

Topic	Can you…	Learn
Basics	annotate without noise	Basic types
Interfaces vs types	know overlap & differences	Interfaces vs type aliases
Narrowing	typeof, in, predicates	Narrowing · in operator
Type guards	custom predicates	Type guards
Literals	string/number unions	Literal types
Enums vs unions	prefer unions often	Enums vs unions
never	exhaustiveness checks	never & exhaustiveness
Assertions	avoid casual `as`	Type assertions · non-null
Strictness	what flags buy you	tsconfig strict

UI state: discriminated unions

type LoadState<T> =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "error"; error: string }
  | { status: "success"; data: T };

function message(state: LoadState<string[]>): string {
  switch (state.status) {
    case "idle":
      return "Start searching";
    case "loading":
      return "Loading…";
    case "error":
      return state.error;
    case "success":
      return `${state.data.length} results`;
    default: {
      const _exhaustive: never = state;
      return _exhaustive;
    }
  }
}

Deep dive: Discriminated unions for UI state.

Generics (practical)

Topic	Can you…	Learn
Basics	`function identity<T>(x: T): T`	Generics basics
Constraints	`T extends { id: string }`	Generic constraints
React components	typed list item render props	Generics in React
keyof / indexed	derive prop maps	keyof typeof
Mapped / conditional	utility types intuition	Mapped types · Conditional

type Props<T> = {
  items: T[];
  getKey: (item: T) => string;
  renderItem: (item: T) => React.ReactNode;
};

function List<T>({ items, getKey, renderItem }: Props<T>) {
  return (
    <ul>
      {items.map((item) => (
        <li key={getKey(item)}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

React + TS table

Topic	Can you…	Learn
Props	`type Props = {…}`	React with TS props
Events	`React.ChangeEvent<HTMLInputElement>`
Children	`React.ReactNode` carefully
Hooks	generic `useState`, ref types
Context	createContext default typing

Utility patterns

Pattern	Learn
`Record` / `Partial` for forms	Record and Partial
`readonly` / `as const`	Readonly & const assertions
`satisfies`	satisfies operator
Branded IDs	Branded types
Runtime validation	Schemas
Declaration files	DefinitelyTyped

Classic verbal questions

Question	Strong direction
any vs unknown?	unknown forces narrowing; any disables checking
interface vs type?	both fine; unions/mapped often type aliases
Why strict null checks?	surfaces real bugs at compile time
How type a polymorphic component?	generics + constrained props
What about `enum`?	union of string literals often simpler
How keep types and runtime aligned?	zod/io-ts/valibot at boundaries

Live puzzle tips

Model the data first
Prefer unions over booleans
Don’t fight the compiler with as chains — redesign
Explain errors in plain English

Footguns

any to silence errors
Huge nested utility types no teammate can read
Lying with assertions at API boundaries — validate instead
React.FC baggage (optional topic; know your team’s style)