Top TypeScript Interview Questions and Answers (2026) | uByte

Interview Prep·February 20, 2026·18 min read

Top TypeScript Interview Questions and Answers (2026)

Comprehensive TypeScript interview questions covering types, generics, decorators, utility types, and advanced patterns. Prepare for frontend and full-stack engineering interviews.

typescriptinterviewinterview questionstypescript interviewfrontend interviewjavascriptgenericsutility types

TypeScript has become the standard for production JavaScript applications. Interviewers at companies like Google, Meta, Stripe, and Airbnb frequently ask TypeScript-specific questions for frontend and full-stack roles. This guide covers the most common TypeScript interview questions with in-depth answers.

Basic TypeScript Questions

1. What is TypeScript and how is it different from JavaScript?

TypeScript is a statically typed superset of JavaScript developed by Microsoft. Key differences:

| Feature | JavaScript | TypeScript | |---------|-----------|------------| | Type System | Dynamic (runtime) | Static (compile-time) | | Compilation | Interpreted | Compiled to JS | | Error detection | Runtime | Compile time | | IDE support | Limited | Full IntelliSense | | Interfaces | No | Yes | | Generics | No | Yes |

// JavaScript - error caught only at runtime
function add(a, b) { return a + b; }
add("1", 2); // "12" — silent bug
 
// TypeScript - error caught at compile time

Interview Prep

How to Prepare for a Technical Coding Interview in 2026

15 min read

Interview Prep

Top 20 C++ Interview Questions (With Answers & Code)

20 min read

Interview Prep

Top 20 C# Interview Questions (With Answers & Code)

19 min read

Get new articles in your inbox

We write about Go, Python, interview prep, and software engineering careers. No spam — unsubscribe anytime.

Create a free account →

Practice what you just read

uByte has interactive coding tutorials, curated interview problems, and timed certification exams — all in your browser.

Try Interview Prep →View Certifications

let name: string = "Alice";
let age: number = 30;
let isActive: boolean = true;
let bigNum: bigint = 9007199254740993n;
let sym: symbol = Symbol("id");
let nothing: undefined = undefined;
let empty: null = null;

// interface — can be merged (declaration merging), better for OOP
interface User {
  id: number;
  name: string;
}
interface User { // merges with above
  email: string;
}
// Effective type: { id: number; name: string; email: string }
 
// type alias — more flexible, supports unions/intersections
type ID = string | number;
type User = { id: ID; name: string };
type Admin = User & { role: string };  // intersection
 
// When to use each:
// interface → public API shapes, class implementations, declaration merging
// type     → unions, tuples, mapped types, computed types

// any — disables type checking (avoid in production)
let val: any = "hello";
val.toUpperCase(); // No error, but risky
 
// unknown — type-safe any; must narrow before use
let data: unknown = fetchData();
if (typeof data === "string") {
  data.toUpperCase(); // OK — narrowed
}
 
// never — function never returns (throws or infinite loop)
function fail(msg: string): never {
  throw new Error(msg);
}
 
// never also appears in exhaustive checks
type Shape = "circle" | "square";
function area(s: Shape): number {
  if (s === "circle") return 3.14;
  if (s === "square") return 1;
  const _exhaustive: never = s; // Error if new shape added
  return _exhaustive;
}

// Without generics — loses type info
function identity(arg: any): any { return arg; }
 
// With generics — preserves type
function identity<T>(arg: T): T { return arg; }
const str = identity("hello");   // type: string
const num = identity(42);        // type: number
 
// Generic constraints
function getLength<T extends { length: number }>(arg: T): number {
  return arg.length;
}
getLength("hello");    // OK
getLength([1, 2, 3]);  // OK
getLength(42);         // Error: number has no length
 
// Generic interfaces
interface Repository<T> {
  findById(id: number): T;
  findAll(): T[];
  save(entity: T): void;
}
 
// Multiple generic params
function pair<K, V>(key: K, value: V): [K, V] {
  return [key, value];
}

interface User {
  id: number;
  name: string;
  email: string;
  password: string;
}
 
// Partial<T> — all properties optional
type UpdateUser = Partial<User>;
// { id?: number; name?: string; email?: string; password?: string }
 
// Required<T> — all properties required
type StrictUser = Required<Partial<User>>;
 
// Readonly<T> — immutable
const user: Readonly<User> = { id: 1, name: "Alice", email: "a@b.com", password: "x" };
// user.name = "Bob"; // Error!
 
// Pick<T, K> — select subset of keys
type PublicUser = Pick<User, "id" | "name" | "email">;
 
// Omit<T, K> — exclude keys
type SafeUser = Omit<User, "password">;
 
// Record<K, V> — key-value map
type RoleMap = Record<"admin" | "user" | "guest", User[]>;
 
// Exclude<T, U> — remove from union
type NonNullable<T> = Exclude<T, null | undefined>;
 
// ReturnType<F> — infer function return type
type Fetched = ReturnType<typeof fetch>; // Promise<Response>
 
// Parameters<F> — infer parameter tuple
type FetchParams = Parameters<typeof fetch>; // [input: RequestInfo, init?: RequestInit]

function process(input: string | number | null) {
  // typeof narrowing
  if (typeof input === "string") {
    console.log(input.toUpperCase()); // string
  }
  // null check
  if (input === null) return;
  // Now input is string | number
  
  // instanceof narrowing
  if (input instanceof Date) {
    console.log(input.toISOString());
  }
}
 
// Discriminated unions — best practice
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
type Shape = Circle | Square;
 
function area(shape: Shape): number {
  switch (shape.kind) {
    case "circle": return Math.PI * shape.radius ** 2;
    case "square": return shape.side ** 2;
  }
}
 
// User-defined type guard
function isString(val: unknown): val is string {
  return typeof val === "string";
}

type IsString<T> = T extends string ? "yes" : "no";
type A = IsString<string>;  // "yes"
type B = IsString<number>;  // "no"
 
// infer keyword — extract types
type UnpackPromise<T> = T extends Promise<infer U> ? U : T;
type Resolved = UnpackPromise<Promise<string>>;  // string
type Same = UnpackPromise<number>;               // number
 
// Distributive conditional types
type NonNullable<T> = T extends null | undefined ? never : T;
type Clean = NonNullable<string | null | undefined>;  // string
 
// Real-world: extract return type
type ReturnType<T extends (...args: any) => any> =
  T extends (...args: any) => infer R ? R : any;

// Make all properties optional
type Partial<T> = { [P in keyof T]?: T[P] };
 
// Make all properties readonly
type Readonly<T> = { readonly [P in keyof T]: T[P] };
 
// Make all properties nullable
type Nullable<T> = { [P in keyof T]: T[P] | null };
 
// Convert all values to string
type Stringify<T> = { [P in keyof T]: string };
 
// Practical: API response wrapper
type ApiResponse<T> = {
  [P in keyof T]: T[P] | null;  // fields may be null from API
} & {
  _meta: { timestamp: string; version: string };
};
 
// Template literal types (TS 4.1+)
type EventName<T extends string> = `on${Capitalize<T>}`;
type ClickHandler = EventName<"click">;  // "onClick"

// Class decorator
function Singleton<T extends { new(...args: any[]): {} }>(constructor: T) {
  let instance: T;
  return class extends constructor {
    constructor(...args: any[]) {
      if (instance) return instance;
      super(...args);
      instance = this as unknown as T;
    }
  };
}
 
@Singleton
class Database {
  connect() { console.log("connected"); }
}
 
// Method decorator — logging
function Log(target: any, key: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${key} with`, args);
    const result = original.apply(this, args);
    console.log(`${key} returned`, result);
    return result;
  };
  return descriptor;
}
 
class Calculator {
  @Log
  add(a: number, b: number) { return a + b; }
}
 
// Property decorator
function Required(target: any, propertyKey: string) {
  // Can validate at runtime, integrate with metadata
}

type Colors = "red" | "green" | "blue";
type Palette = Record<Colors, string | [number, number, number]>;
 
// Without satisfies:
const palette: Palette = {
  red: [255, 0, 0],
  green: "#00ff00",
  blue: [0, 0, 255],
};
// palette.red — type is string | [number, number, number]
// Can't call .map() directly
 
// With satisfies:
const palette2 = {
  red: [255, 0, 0],
  green: "#00ff00",
  blue: [0, 0, 255],
} satisfies Palette;
// palette2.red — type is [number, number, number] (preserved!)
palette2.red.map(v => v / 255); // OK!
palette2.green.toUpperCase();   // OK!

{
  "compilerOptions": {
    "strict": true,              // Enable all strict checks
    "target": "ES2022",          // Output JS version
    "module": "ESNext",          // Module system
    "moduleResolution": "Bundler", // For Vite/webpack
    "lib": ["ES2022", "DOM"],    // Type libs to include
    "baseUrl": ".",              // For path aliases
    "paths": {
      "@/*": ["./src/*"]
    },
    "noUncheckedIndexedAccess": true,  // Safer array access
    "exactOptionalPropertyTypes": true, // Strict optional
    "noImplicitReturns": true,   // All code paths must return
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,        // Skip checking .d.ts files
    "declaration": true,         // Generate .d.ts files
    "sourceMap": true
  }
}

import React, { FC, ReactNode, useState, useCallback } from "react";
 
// Function component with typed props
interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: "primary" | "secondary" | "ghost";
  disabled?: boolean;
  children?: ReactNode;
}
 
const Button: FC<ButtonProps> = ({ label, onClick, variant = "primary", disabled, children }) => (
  <button
    onClick={onClick}
    disabled={disabled}
    className={`btn-${variant}`}
  >
    {children ?? label}
  </button>
);
 
// Generic components
interface ListProps<T> {
  items: T[];
  renderItem: (item: T, index: number) => ReactNode;
  keyExtractor: (item: T) => string;
}
 
function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) {
  return (
    <ul>
      {items.map((item, i) => (
        <li key={keyExtractor(item)}>{renderItem(item, i)}</li>
      ))}
    </ul>
  );
}
 
// Typed hooks
function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T) => void] {
  const [storedValue, setStoredValue] = useState<T>(() => {
    const item = window.localStorage.getItem(key);
    return item ? JSON.parse(item) : initialValue;
  });
 
  const setValue = useCallback((value: T) => {
    setStoredValue(value);
    window.localStorage.setItem(key, JSON.stringify(value));
  }, [key]);
 
  return [storedValue, setValue];
}

// Bad — bypasses safety
const input = document.getElementById("input") as HTMLInputElement;
 
// Good — with null check
const el = document.getElementById("input");
if (!(el instanceof HTMLInputElement)) throw new Error("Expected input element");
const input = el; // typed as HTMLInputElement

Top TypeScript Interview Questions and Answers (2026)

Basic TypeScript Questions

1. What is TypeScript and how is it different from JavaScript?

Related articles

Get new articles in your inbox

Practice what you just read

2. What are the primitive types in TypeScript?

3. What is the difference between `interface` and `type`?

4. Explain `unknown` vs `any` vs `never`

Intermediate TypeScript Questions

5. What are generics and why are they useful?

6. What are TypeScript utility types?

7. Explain type narrowing with examples

8. What are conditional types?

Advanced TypeScript Questions

9. What are mapped types?

10. How do decorators work in TypeScript?

11. What is `satisfies` operator (TypeScript 4.9+)?

12. How do you configure TypeScript for a production project?

TypeScript + React Questions

13. How do you type React components in TypeScript?

Common Interview Pitfalls

❌ Using `any` everywhere

❌ `as` type assertions without narrowing

❌ Forgetting to use `strict` mode

Quick Reference: Key Concepts

Basic TypeScript Questions

1. What is TypeScript and how is it different from JavaScript?

Related articles

Get new articles in your inbox

Practice what you just read

2. What are the primitive types in TypeScript?

3. What is the difference between interface and type?

4. Explain unknown vs any vs never

Intermediate TypeScript Questions

5. What are generics and why are they useful?

6. What are TypeScript utility types?

7. Explain type narrowing with examples

8. What are conditional types?

Advanced TypeScript Questions

9. What are mapped types?

10. How do decorators work in TypeScript?

11. What is satisfies operator (TypeScript 4.9+)?

12. How do you configure TypeScript for a production project?

TypeScript + React Questions

13. How do you type React components in TypeScript?

Common Interview Pitfalls

❌ Using any everywhere

❌ as type assertions without narrowing

❌ Forgetting to use strict mode

Quick Reference: Key Concepts

3. What is the difference between `interface` and `type`?

4. Explain `unknown` vs `any` vs `never`

11. What is `satisfies` operator (TypeScript 4.9+)?

❌ Using `any` everywhere

❌ `as` type assertions without narrowing

❌ Forgetting to use `strict` mode