TypeScript Coding Questions

Type a sum function.

function sum(a: number, b: number): number {
  return a + b;
}

Model a User with an interface.

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

Narrow a status union.

type Status = "idle" | "loading" | "error";
function message(status: Status): string {
  if (status === "loading") return "Please wait";
  if (status === "error") return "Try again";
  return "Ready";
}

Write a generic first() helper.

function first<T>(items: T[]): T | undefined {
  return items[0];
}

Accept a Partial update object.

function updateUser(user: User, patch: Partial<User>): User {
  return { ...user, ...patch };
}

Make props readonly.

type CardProps = Readonly<{
  title: string;
  count: number;
}>;

Type a string-to-number map.

const scores: Record<string, number> = {
  html: 50,
  css: 80,
};

Model API result with a discriminant.

type Result =
  | { ok: true; data: string }
  | { ok: false; error: string };
function getData(result: Result) {
  return result.ok ? result.data : result.error;
}

Create a typed property getter.

function getProp<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

Extract awaited type from a promise.

type User = Awaited<ReturnType<typeof fetchUser>>;

Create a const enum-like object.

const Roles = {
  Admin: "admin",
  Editor: "editor",
} as const;
type Role = (typeof Roles)[keyof typeof Roles];

Write an isString type guard.

function isString(value: unknown): value is string {
  return typeof value === "string";
}

Pick id and name from User.

type UserPreview = Pick<User, "id" | "name">;

Omit sensitive fields.

type PublicUser = Omit<User, "password">;

Overload parse for string/number.

function parse(value: string): number;
function parse(value: number): string;
function parse(value: string | number): string | number {
  return typeof value === "string" ? Number(value) : String(value);
}

Use satisfies for config typing.

const config = {
  retries: 3,
  mode: "safe",
} satisfies Record<string, string | number>;

Type a list component with generics.

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

Type a runtime parse result.

type ParseResult<T> =
  | { success: true; data: T }
  | { success: false; error: string };

Build an event name type.

type EventName = `on${Capitalize<"click" | "focus">}`;

Remove null/undefined from a type.

type Value = string | null | undefined;
type Clean = NonNullable<Value>;