yoklainterview sim

TypeScript Frontend Interview Questions

450 verified TypeScript Frontend interview questions — solve with answers, learn from explanations, test yourself in a real simulation.

Try the real simulation →

Sample questions

Typescript Advanced TypesDifficulty 1
TypeScript ships several built-in utility types that transform an existing type into a new one. Which of these is a built-in utility type?
  • aOptional<T>
  • bPartial<T>
  • cNullable<T>
  • dMutable<T>
Explanation:Partial<T> is one of TypeScript's built-in utility types — it produces a new type where every property of T is optional. Optional, Nullable, and Mutable are not part of the standard library (teams sometimes define their own similarly-named helpers, but they aren't built in).
Typescript Advanced TypesDifficulty 1
interface User {
  id: number;
  name: string;
  email: string;
}
type UserUpdate = Partial<User>;
const update: UserUpdate = { name: 'Ada' };

Does this compile?
  • aYes — Partial<User> makes every property of User optional, so a subset object is valid
  • bNo — update is missing id and email, which User requires
  • cNo — Partial can only be applied to classes, not interfaces
  • dYes, but only because name happens to be the first property declared in User
Explanation:Partial<T> maps over every property of T and marks it optional (?). Since UserUpdate = Partial<User>, all of id, name, and email become optional, so an object supplying only name satisfies the type. Property declaration order doesn't matter (d).
Typescript Advanced TypesDifficulty 2
interface Product {
  id: number;
  name: string;
  price: number;
}
type ProductPreview = Pick<Product, 'id' | 'name'>;

What properties does ProductPreview have?
  • aAll of Product's properties, with price made optional
  • bOnly price, since Pick selects everything NOT listed
  • cOnly id and name, exactly as listed in the second type argument
  • did, name, and price, since Pick keeps the original shape unchanged
Explanation:Pick<T, K> builds a new type containing only the properties named in the union K. Here K is 'id' | 'name', so ProductPreview has exactly those two properties — price is excluded entirely, not made optional.
Typescript Advanced TypesDifficulty 2
interface Product {
  id: number;
  name: string;
  price: number;
  internalCode: string;
}
type PublicProduct = Omit<Product, 'internalCode'>;

What properties does PublicProduct have?
  • aOnly internalCode
  • bAll of Product's properties unchanged, including internalCode
  • cNone — Omit with a single string removes all properties
  • did, name, and price — every property of Product except internalCode
Explanation:Omit<T, K> is the inverse of Pick: it keeps every property of T EXCEPT those named in K. Here K is just 'internalCode', so PublicProduct retains id, name, and price and drops internalCode.
Typescript Advanced TypesDifficulty 2
type Scores = Record<'math' | 'science' | 'art', number>;
const s: Scores = { math: 90, science: 85, art: 70 };

What does Record<'math' | 'science' | 'art', number> describe?
  • aAn array of numbers with exactly 3 elements
  • bAn object type with exactly the keys 'math', 'science', 'art', each mapped to a number
  • cA union type meaning 'either a string literal or a number'
  • dAn object type where any string key is allowed, as long as the value is a number
Explanation:Record<K, V> builds an object type whose keys are exactly the members of union K, each with value type V. So Record<'math' | 'science' | 'art', number> requires an object with precisely those three keys, each holding a number — omitting one of them, or adding an unlisted key, is a type error.
Typescript Advanced TypesDifficulty 2
function createUser(name: string, age: number) {
  return { name, age, createdAt: new Date() };
}
type NewUser = ReturnType<typeof createUser>;

What does ReturnType<typeof createUser> produce?
  • atypeof createUser, i.e. the literal string 'function'
  • bvoid, since ReturnType only works on functions with no return value
  • cThe type of whatever createUser returns: { name: string; age: number; createdAt: Date }
  • dA function type identical to createUser's own signature
Explanation:typeof createUser gets the function's TYPE (its call signature), and ReturnType<F> extracts the type of what a function type F returns. So NewUser becomes the inferred return object shape { name: string; age: number; createdAt: Date } — it does not preserve the function signature itself (d), and it isn't a literal string (a).

Test yourself against the 2925-question Frontend bank.

Start interview