TypeScript Interview Questions and Answers: 60 Questions from Easy to Hard

type ElementOf<T> = T extends readonly (infer U)[] ? U : never;
type Unwrap<T> = T extends Promise<infer V> ? V : T;
type FirstArg<F> =
    F extends (first: infer A, ...rest: any[]) => any ? A : never;

type A = ElementOf<string[]>;         // string
type B = Unwrap<Promise<number>>;     // number
type C = FirstArg<(id: number) => void>; // number

type ToArray<T> = T extends unknown ? T[] : never;
type NoDistribute<T> = [T] extends [unknown] ? T[] : never;

type A = ToArray<string | number>;      // string[] | number[]
type B = NoDistribute<string | number>; // (string | number)[]

type Without<T, U> = T extends U ? never : T;
type C = Without<"a" | "b" | "c", "a">; // "b" | "c"

type Getters<T> = {
    [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type Candidate = { name: string; experience: number };

type CandidateGetters = Getters<Candidate>;
// { getName: () => string; getExperience: () => number }

type OnlyStrings<T> = {
    [K in keyof T as T[K] extends string ? K : never]: T[K];
};
type S = OnlyStrings<Candidate>; // { name: string }

type Mutable<T> = { -readonly [K in keyof T]: T[K] };
type Concrete<T> = { [K in keyof T]-?: T[K] };

type Config = {
    readonly apiUrl: string;
    readonly timeoutMs?: number;
};

type Editable = Mutable<Config>;
// { apiUrl: string; timeoutMs?: number }
type Full = Concrete<Config>;
// { readonly apiUrl: string; readonly timeoutMs: number }

type Handler = (e: MouseEvent) => void;
interface Bus { emit(e: Event): void }           // method
interface SafeBus { emit: (e: Event) => void }   // property

const onClick: Handler = e => console.log(e.clientX);

const bus: Bus = { emit: onClick };      // allowed (bivariant)
const safe: SafeBus = { emit: onClick }; // Error with strict

type Brand<T, B extends string> = T & { readonly __brand: B };
type UserId = Brand<string, "UserId">;
type OrderId = Brand<string, "OrderId">;

const toUserId = (s: string) => s as UserId;
const toOrderId = (s: string) => s as OrderId;

function cancelOrder(id: OrderId) { return "cancelled " + id; }

const uid = toUserId("U-1001");
const oid = toOrderId("O-5512");
console.log(cancelOrder(oid)); // cancelled O-5512
// cancelOrder(uid);           // Error: UserId is not OrderId

const schema = { name: "string", age: "number" } as const;

type Kinds = { string: string; number: number };
type FromSchema<S> = {
    -readonly [K in keyof S]: Kinds[S[K] & keyof Kinds];
};
type Person = FromSchema<typeof schema>;
// { name: string; age: number }

function parsePerson(x: unknown): Person {
    if (typeof x !== "object" || x === null) {
        throw new Error("Not an object");
    }
    const o = x as Record<string, unknown>;
    for (const [key, kind] of Object.entries(schema)) {
        if (typeof o[key] !== kind) throw new Error("Bad " + key);
    }
    return o as Person;
}

console.log(parsePerson({ name: "Divya", age: 29 }).name);
// Divya

// greet.ts, run with: node greet.ts   (Node.js 24)
type Lang = "hi" | "en";
const greet = (l: Lang) => (l === "hi" ? "Namaste" : "Hello");
console.log(greet("hi")); // Namaste

// enum Lang2 { Hi, En }
// Node.js 24 refuses this in its default strip-only mode:
// ERR_UNSUPPORTED_TYPESCRIPT_SYNTAX

// money.ts
export interface Invoice { id: string; totalPaise: number }
export const formatInr = (p: number) =>
    "Rs " + (p / 100).toFixed(2);

// billing.ts
import type { Invoice } from "./money"; // erased completely
import { formatInr } from "./money";    // kept as an import
export type { Invoice };                // type-only re-export

// src/types/express.d.ts
import "express";

declare module "express-serve-static-core" {
    interface Request {
        user?: { id: string; orgId: number; role: "admin" | "staff" };
    }
}

// src/types/global.d.ts
export {};
declare global {
    interface Window {
        dataLayer: unknown[];
    }
}

import type { ReactNode } from "react";

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

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

// T is inferred as { id: string; city: string }
<List
    items={[{ id: "1", city: "Indore" }]}
    getKey={c => c.id}
    renderItem={c => c.city}
/>;

type Job = { id: number; title: string };

type Endpoints = {
    "/jobs": { params: { city: string }; response: Job[] };
    "/jobs/detail": { params: { id: number }; response: Job };
};

async function api<P extends keyof Endpoints>(
    path: P,
    params: Endpoints[P]["params"],
): Promise<Endpoints[P]["response"]> {
    const qs = new URLSearchParams(
        Object.entries(params).map(([k, v]) => [k, String(v)]),
    );
    const res = await fetch(`${path}?${qs}`);
    if (!res.ok) throw new Error("HTTP " + res.status);
    return res.json(); // validate here in production code
}

// const jobs = await api("/jobs", { city: "Hyderabad" });

function routes<const T extends readonly string[]>(p: T): T {
    return p;
}
const r = routes(["/home", "/jobs"]);
// readonly ["/home", "/jobs"]

function pick<C extends string>(opts: C[], fallback: NoInfer<C>) {
    return opts[0] ?? fallback;
}
pick(["UPI", "card"], "UPI");     // fine
// pick(["UPI", "card"], "cash"); // Error: not "UPI" | "card"

const pins = ["560001", undefined, "411001", undefined];

const valid = pins.filter(p => p !== undefined);
// TypeScript 5.5+: string[]
// before 5.5: (string | undefined)[]

const short = pins.filter(p => !!p);
// still (string | undefined)[]: "" is falsy too

console.log(valid.length, short.length); // 2 2