How to Pass a TypeScript Interview: Top Advanced-Level Questions

Advanced TypeScript Interview: How to Impress an Employer

TypeScript has long ceased to be just a "superset" of JavaScript. In modern interviews for Senior positions, they test not only knowledge of types but also the ability to work with conditional types, mapping, decorators, and the type inference system. In this article, we will cover 4 key topics that will help you confidently pass a technical TypeScript interview at an advanced level.

1. Conditional Types and the infer Keyword

Conditional types allow you to select one of two types based on a condition. They are structured like a ternary operator: T extends U ? X : Y. In an interview, you might be asked to write a type that extracts the return type of a function.

// Example: extracting a function's return typetype ReturnTypeExtract<T> = T extends (...args: any[]) => infer R ? R : never;

function greet(name: string): string {  return "Hello, " + name;}

type GreetReturn = ReturnTypeExtract<typeof greet>; // string

The infer keyword is used inside conditional types to declare a new type variable. It allows you to "extract" a part of a type from a complex structure. A common question is: "What is infer and where is it used?" The answer: for extracting types from promises, functions, and tuples.

// Extracting the element type from a Promisetype UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type Result = UnwrapPromise<Promise<number>>; // numbertype Result2 = UnwrapPromise<string>; // string

2. Mapped Types and readonly/optional Modifiers

Mapped types allow you to create new types by iterating over the properties of an existing type. This is a powerful tool for creating utility types like Partial<T> or Readonly<T>. In an interview, you might be asked to implement your own version of Pick<T, K>.

// Custom implementation of Picktype MyPick<T, K extends keyof T> = {  [P in K]: T[P];};

interface User {  id: number;  name: string;  email: string;}

type UserBasic = MyPick<User, 'id' | 'name'>;// { id: number; name: string }

Note the keyof T operator, which returns a union of the object's keys. Combined with mapping, it allows for flexible type transformations. You may also be asked about the readonly and ? (optional) modifiers. They can be added or removed using the + and - prefixes:

// Removing readonly from all propertiestype Mutable<T> = {  -readonly [P in keyof T]: T[P];};

type ImmutableUser = Readonly<User>;type MutableUser = Mutable<ImmutableUser>; // all fields are mutable again

3. Decorators and Their Typing

Decorators are an experimental TypeScript feature actively used in Angular and NestJS. In an interview, you might be asked how to type a class or method decorator. It's important to understand that a decorator is simply a function that takes a target object and returns it (or a new one).

// Typed class decoratorfunction Logger<T extends { new (...args: any[]): {} }>(constructor: T) {  console.log(`Class ${constructor.name} created`);  return class extends constructor {    constructor(...args: any[]) {      super(...args);      console.log('Instance created');    }  };}

@Loggerclass MyService {  constructor(public name: string) {}}

const service = new MyService('Test'); // Console output: "Class MyService created", then "Instance created"

In advanced questions, you might be asked to implement a decorator that adds metadata or validation. Pay attention to the use of generics — <T extends { n