TypeScript Interview Questions: Types, Generics & Real-World Patterns

// ─── INTERFACE: open, mergeable, ideal for object contracts ───
interface UserProfile {
  id: number;
  username: string;
}

// Declaration merging — TypeScript merges both declarations into one.
// Try doing this with `type` and you'll get a duplicate identifier error.
interface UserProfile {
  email: string; // merged in — now UserProfile has id, username AND email
}

const currentUser: UserProfile = {
  id: 1,
  username: 'sarah_dev',
  email: 'sarah@example.com', // required because of the merged declaration
};

// ─── TYPE: closed, flexible, handles unions and primitives ───
type UserID = string | number; // can't do this with interface

type AdminUser = UserProfile & {
  permissions: string[]; // intersection type — combines UserProfile + new fields
};

const adminUser: AdminUser = {
  id: 99,
  username: 'admin_alex',
  email: 'alex@example.com',
  permissions: ['read', 'write', 'delete'],
};

// ─── Practical function using both ───
function getUserDisplayName(user: UserProfile): string {
  // TypeScript knows `user.username` exists because of the interface contract
  return `@${user.username} (${user.email})`;
}

console.log(getUserDisplayName(currentUser));
// Output: @sarah_dev (sarah@example.com)

console.log(`Admin permissions: ${adminUser.permissions.join(', ')}`);
// Output: Admin permissions: read, write, delete

// ─── The problem: without generics, you lose type info ───
function getFirstItemUnsafe(items: any[]): any {
  return items[0];
  // Caller gets `any` back — TypeScript can't help after this point
}

const maybeAString = getFirstItemUnsafe(['apple', 'banana']);
// maybeAString is typed as `any` — no autocomplete, no safety

// ─── The solution: generics preserve type information ───
function getFirstItem<T>(items: T[]): T | undefined {
  // T is a placeholder. TypeScript fills it in based on what you pass.
  return items.length > 0 ? items[0] : undefined;
}

const firstFruit = getFirstItem(['apple', 'banana', 'cherry']);
// TypeScript infers T = string, so firstFruit is typed as `string | undefined`
console.log(firstFruit?.toUpperCase()); // Output: APPLE — .toUpperCase() is valid!

const firstScore = getFirstItem([98, 76, 84]);
// TypeScript infers T = number, so firstScore is typed as `number | undefined`
console.log(firstScore?.toFixed(2)); // Output: 98.00

// ─── Generic with a constraint: T must have an `id` property ───
interface Identifiable {
  id: number;
}

function findById<T extends Identifiable>(items: T[], targetId: number): T | undefined {
  // The constraint `T extends Identifiable` guarantees `item.id` always exists
  return items.find((item) => item.id === targetId);
}

const products = [
  { id: 1, name: 'Laptop', price: 999 },
  { id: 2, name: 'Mouse', price: 29 },
  { id: 3, name: 'Keyboard', price: 79 },
];

const foundProduct = findById(products, 2);
// TypeScript knows foundProduct has `id`, `name`, AND `price` — full type preserved
console.log(foundProduct?.name);  // Output: Mouse
console.log(foundProduct?.price); // Output: 29

// ─── Real-world pattern: typed API response wrapper ───
interface ApiResponse<TData> {
  data: TData;
  status: number;
  message: string;
}

interface OrderSummary {
  orderId: string;
  total: number;
  itemCount: number;
}

// This function returns a fully typed response — caller knows exactly what's inside
function mockFetchOrder(): ApiResponse<OrderSummary> {
  return {
    data: { orderId: 'ORD-2024-001', total: 149.99, itemCount: 3 },
    status: 200,
    message: 'OK',
  };
}

const orderResponse = mockFetchOrder();
console.log(`Order ${orderResponse.data.orderId}: $${orderResponse.data.total}`);
// Output: Order ORD-2024-001: $149.99

// ─── any: TypeScript goes completely silent — dangerous ───
function parseConfigUnsafe(rawInput: any) {
  // TypeScript won't stop you doing any of this, even if it crashes at runtime
  console.log(rawInput.settings.theme.toUpperCase()); // no error, even if undefined
}

// ─── unknown: safe alternative — must prove the type before using it ───
function parseConfigSafe(rawInput: unknown): string {
  // You MUST narrow the type before TypeScript lets you touch it
  if (
    typeof rawInput === 'object' &&
    rawInput !== null &&
    'theme' in rawInput &&
    typeof (rawInput as { theme: unknown }).theme === 'string'
  ) {
    // Now TypeScript is satisfied — we've proven `theme` is a string
    return (rawInput as { theme: string }).theme.toUpperCase();
  }
  return 'DEFAULT';
}

console.log(parseConfigSafe({ theme: 'dark' }));  // Output: DARK
console.log(parseConfigSafe({ theme: 42 }));       // Output: DEFAULT
console.log(parseConfigSafe(null));                // Output: DEFAULT

// ─── never: exhaustive checks — TypeScript tells you when you miss a case ───
type PaymentMethod = 'credit_card' | 'paypal' | 'crypto';

function processPayment(method: PaymentMethod): string {
  switch (method) {
    case 'credit_card':
      return 'Processing credit card charge...';
    case 'paypal':
      return 'Redirecting to PayPal...';
    case 'crypto':
      return 'Generating wallet address...';
    default:
      // This line is the safety net.
      // If you add 'bank_transfer' to PaymentMethod and forget to handle it,
      // TypeScript will error HERE because `method` would be `never` in the
      // default case — and `never` can't be assigned to `never`.
      const exhaustiveCheck: never = method;
      throw new Error(`Unhandled payment method: ${exhaustiveCheck}`);
  }
}

console.log(processPayment('paypal'));      // Output: Redirecting to PayPal...
console.log(processPayment('crypto'));      // Output: Generating wallet address...

// ─── never as a function return type ───
function throwCriticalError(message: string): never {
  // A function that ALWAYS throws never returns normally.
  // TypeScript uses `never` to signal: execution ends here.
  throw new Error(`CRITICAL: ${message}`);
}

// TypeScript knows code after this call is unreachable
// throwCriticalError('Database connection lost');

// ─── Discriminated union: each type has a unique `kind` field ───
interface SuccessResponse {
  kind: 'success';
  data: { userId: number; username: string };
}

interface ErrorResponse {
  kind: 'error';
  errorCode: number;
  message: string;
}

interface LoadingResponse {
  kind: 'loading';
  progress: number; // 0-100
}

type ApiState = SuccessResponse | ErrorResponse | LoadingResponse;

// ─── Custom type guard using `is` keyword ───
function isSuccessResponse(response: ApiState): response is SuccessResponse {
  // When this returns true, TypeScript narrows `response` to `SuccessResponse`
  // in the calling code — even outside this function
  return response.kind === 'success';
}

// ─── Exhaustive handler using narrowing ───
function renderApiState(state: ApiState): string {
  // TypeScript tracks the type at each branch
  if (state.kind === 'loading') {
    // TypeScript knows this is LoadingResponse — `progress` is available
    return `Loading... ${state.progress}% complete`;
  }

  if (isSuccessResponse(state)) {
    // TypeScript knows this is SuccessResponse — `data` is available
    return `Welcome back, ${state.data.username}!`;
  }

  // TypeScript has narrowed: only ErrorResponse is left
  // `errorCode` and `message` are both safely accessible here
  return `Error ${state.errorCode}: ${state.message}`;
}

// ─── Testing all branches ───
const loadingState: ApiState = { kind: 'loading', progress: 45 };
const successState: ApiState = { kind: 'success', data: { userId: 7, username: 'maya_codes' } };
const errorState: ApiState = { kind: 'error', errorCode: 404, message: 'User not found' };

console.log(renderApiState(loadingState));  // Output: Loading... 45% complete
console.log(renderApiState(successState)); // Output: Welcome back, maya_codes!
console.log(renderApiState(errorState));   // Output: Error 404: User not found

// ─── instanceof guard — useful with class hierarchies ───
class NetworkError extends Error {
  constructor(public statusCode: number, message: string) {
    super(message);
    this.name = 'NetworkError';
  }
}

function handleError(error: unknown): string {
  if (error instanceof NetworkError) {
    // TypeScript knows `error` has `statusCode` here
    return `Network failure [${error.statusCode}]: ${error.message}`;
  }
  if (error instanceof Error) {
    return `General error: ${error.message}`;
  }
  return 'Unknown error occurred';
}

console.log(handleError(new NetworkError(503, 'Service unavailable')));
// Output: Network failure [503]: Service unavailable

console.log(handleError(new Error('Something broke')));
// Output: General error: Something broke