Interview prep

function total(price: number, quantity: number) {
  return price * quantity;
}

total(9.99, 3); // ok
total("9.99", 3); // error: string is not assignable to number
total(9.99); // error: expected 2 arguments, but got 1

declare const input: unknown;

input.toUpperCase(); // error: 'input' is of type 'unknown'

if (typeof input === "string") {
  input.toUpperCase(); // ok: narrowed to string
}

const anything: any = input;
anything.foo.bar(); // compiles, then throws at runtime

function fail(message: string): never {
  throw new Error(message);
}

interface User {
  id: string;
  name: string;
}
interface Admin extends User {
  permissions: string[];
}

type AdminAlias = User & { permissions: string[] }; // intersection instead of extends
type Id = string | number; // only an alias can name a union
type Point = [x: number, y: number]; // ...or a tuple
type Getter<T> = () => T; // ...or a function type

interface Box { width: number }
interface Box { height: number }
const box: Box = { width: 1, height: 2 }; // ok: the two declarations merged

type Size = { width: number };
// type Size = { height: number }; // error: Duplicate identifier 'Size'

let mode = "dark"; // string: a let can be reassigned, so the literal widens
const theme = "dark"; // "dark": a const cannot change, so the literal is kept

const config = { env: "prod", retries: 3 };
// { env: string; retries: number } because properties are mutable

const frozen = { env: "prod", retries: 3 } as const;
// { readonly env: "prod"; readonly retries: 3 }

const ROLES = ["admin", "editor", "viewer"] as const;
type Role = (typeof ROLES)[number]; // "admin" | "editor" | "viewer"

declare function request(url: string, method: "GET" | "POST"): void;

const req = { url: "/users", method: "GET" };
request(req.url, req.method); // error: string is not assignable to "GET" | "POST"

const fixed = { url: "/users", method: "GET" } as const;
request(fixed.url, fixed.method); // ok

type Id = string | number;

function format(id: Id) {
  id.toFixed(); // error: 'toFixed' does not exist on type 'string'
  return typeof id === "number" ? id.toFixed(0) : id.trim();
}

type Timestamps = { createdAt: Date; updatedAt: Date };
type Post = { title: string } & Timestamps; // has all three properties

type Impossible = string & number; // never: no value is both

interface Point {
  x: number;
  y: number;
}

class Vector {
  constructor(public x: number, public y: number, public z: number) {}
}

const fromClass: Point = new Vector(1, 2, 3); // ok: it has x and y, which is all Point asks for

const literal: Point = { x: 1, y: 2, z: 3 }; // error: 'z' does not exist in type 'Point'

const wide = { x: 1, y: 2, z: 3 };
const viaVariable: Point = wide; // ok: the excess property check only applies to fresh literals

type Brand<T, Name extends string> = T & { readonly __brand: Name };

type UserId = Brand<string, "UserId">;
type OrderId = Brand<string, "OrderId">;

const toUserId = (value: string) => value as UserId; // the single place the assertion lives

declare function loadUser(id: UserId): void;
declare const orderId: OrderId;

loadUser(toUserId("u_1")); // ok
loadUser(orderId); // error: 'OrderId' is not assignable to 'UserId'
loadUser("u_1"); // error: 'string' is not assignable to 'UserId'

interface User {
  name: string;
  address?: { city: string }; // optional: { city: string } | undefined
}

function describe(user: User | null) {
  user.name; // error: 'user' is possibly 'null'

  const city = user?.address?.city; // string | undefined
  const label = user?.address?.city ?? "Unknown"; // string
  const forced = user!.name; // compiles; throws at runtime if user is null
  return [city, label, forced];
}

declare const stored: number | undefined; // imagine it holds 0
const a = stored || 10; // 10: || treats every falsy value as missing
const b = stored ?? 10; // 0: ?? only replaces null and undefined

type Theme = Record<string, string | [number, number, number]>;

const annotated: Theme = { primary: "#e4572e", ink: [18, 16, 15] };
annotated.primary.toUpperCase(); // error: widened to string | [number, number, number]

const checked = { primary: "#e4572e", ink: [18, 16, 15] } satisfies Theme;
checked.primary.toUpperCase(); // ok: validated against Theme, still known to be a string
checked.missing; // error: unknown keys are rejected, unlike the annotated version

const asserted = {} as Theme; // compiles and checks nothing

const pair: [string, number] = ["age", 42];
const [label, value] = pair; // label: string, value: number

type Range = [start: number, end?: number]; // labelled, with an optional element
type Args = [first: string, ...rest: number[]]; // a variadic tail

function useToggle(initial = false) {
  let on = initial;
  const toggle = () => {
    on = !on;
  };
  return [on, toggle] as const; // readonly [boolean, () => void]
}

const frozen: readonly number[] = [1, 2, 3];
frozen.push(4); // error: 'push' does not exist on type 'readonly number[]'

const items = [1, 2, 3]; // const only fixes the binding
items.push(4); // ok: the array itself is still mutable

function greet(name: string, greeting = "Hello", ...titles: string[]): string {
  return greeting + ", " + [...titles, name].join(" ");
}

type Comparator<T> = (a: T, b: T) => number; // a function type, reusable as a callback type

function parse(input: string): number;
function parse(input: string[]): number[];
function parse(input: string | string[]): number | number[] {
  return Array.isArray(input) ? input.map(Number) : Number(input);
}

const one = parse("42"); // number
const many = parse(["1", "2"]); // number[]

declare const either: string | string[];
parse(either); // error: no overload matches; the implementation signature is not callable

abstract class Shape {
  // A parameter property: declares the field and assigns it in one step.
  constructor(protected readonly name: string) {}

  abstract area(): number; // subclasses must implement this

  describe() {
    return this.name + " with area " + this.area().toFixed(2);
  }
}

class Circle extends Shape {
  #radius: number; // private at runtime
  private scale = 1; // private only to the type checker

  constructor(radius: number) {
    super("circle");
    this.#radius = radius;
  }

  area() {
    return Math.PI * this.#radius ** 2 * this.scale;
  }
}

const circle = new Circle(2);
circle.describe(); // ok
circle.name; // error: 'name' is protected
circle.scale; // error: 'scale' is private
new Shape("blob"); // error: cannot create an instance of an abstract class

let a: object; // objects, arrays, functions
let b: {}; // anything but null and undefined, yes, including 42
let c: Record<string, unknown>;

a = [1, 2];
a = 42; // error: number is not assignable to object
b = 42; // ok, which is rarely what you meant
b = null; // error
c = { id: 1 };
c.id.toFixed(); // error: 'c.id' is of type 'unknown'

const prices: Record<string, number> = { apple: 1.2 };
const pear = prices.pear; // typed as number, actually undefined

// Honest alternatives:
const known: Record<"apple" | "pear", number> = { apple: 1.2, pear: 0.9 }; // exact keys
const sparse: Partial<Record<string, number>> = { apple: 1.2 }; // values may be missing
const lookup = new Map<string, number>(); // .get() returns number | undefined

function merge<A extends object, B extends object>(a: A, b: B): A & B {
  return { ...a, ...b };
}

const merged = merge({ name: "Ada" }, { age: 36 });
merged.name; // string
merged.age; // number

enum Direction { Up, Down } // numeric: Up = 0, Down = 1, plus a reverse mapping at runtime
enum Status { Active = "ACTIVE", Archived = "ARCHIVED" } // string enum

type StatusUnion = "active" | "archived"; // no runtime code at all

const STATUS = { Active: "active", Archived: "archived" } as const;
type StatusValue = (typeof STATUS)[keyof typeof STATUS]; // "active" | "archived"

declare function setStatus(status: Status): void;
setStatus(Status.Active); // ok
setStatus("ACTIVE"); // error: the raw string is not assignable to a string enum

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

async function unsafe(): Promise<User> {
  const res = await fetch("/api/user");
  return res.json(); // json() is Promise<any>: this compiles whatever the server sends
}

function isUser(value: unknown): value is User {
  return (
    typeof value === "object" &&
    value !== null &&
    "id" in value &&
    typeof value.id === "string" &&
    "name" in value &&
    typeof value.name === "string"
  );
}

async function safe(): Promise<User> {
  const data: unknown = await (await fetch("/api/user")).json();
  if (!isUser(data)) throw new Error("Unexpected response shape");
  return data; // narrowed to User by the guard
}

import { z } from "zod";

const UserSchema = z.object({
  id: z.string(),
  name: z.string(),
  email: z.string().email().optional(),
});

type User = z.infer<typeof UserSchema>; // derived, never written twice

export async function loadUser(): Promise<User> {
  const res = await fetch("/api/user");
  return UserSchema.parse(await res.json()); // throws with a precise message on a bad payload
}

function describe(value: string | number | string[] | Date | null) {
  if (value === null) return "nothing"; // equality
  if (typeof value === "string") return value.toUpperCase(); // typeof
  if (typeof value === "number") return value.toFixed(1);
  if (Array.isArray(value)) return value.join(", "); // built-in type guard
  return value.toISOString(); // only Date is left
}

type Fish = { swim(): void };
type Bird = { fly(): void };

function move(animal: Fish | Bird) {
  if ("swim" in animal) animal.swim(); // the in operator
  else animal.fly();
}

function message(error: unknown) {
  return error instanceof Error ? error.message : String(error); // instanceof
}

interface Cat {
  meow(): void;
}
interface Dog {
  bark(): void;
}

function looksLikeCat(pet: Cat | Dog): boolean {
  return "meow" in pet;
}

function isCat(pet: Cat | Dog): pet is Cat {
  return "meow" in pet;
}

function speak(pet: Cat | Dog) {
  if (looksLikeCat(pet)) {
    pet.meow(); // error: a boolean says nothing about the type of pet
  }
  if (isCat(pet)) {
    pet.meow(); // ok: narrowed to Cat
  } else {
    pet.bark(); // ok: narrowed to Dog
  }
}

function assertIsString(value: unknown): asserts value is string {
  if (typeof value !== "string") throw new TypeError("Expected a string");
}

function shout(input: unknown) {
  assertIsString(input);
  return input.toUpperCase(); // narrowed for the rest of the scope
}

const mixed = [1, null, 2, undefined];
const numbers = mixed.filter((n): n is number => n != null); // number[]

type RequestState<T> =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: T }
  | { status: "error"; error: Error };

function render(state: RequestState<string[]>): string {
  switch (state.status) {
    case "idle":
      return "Nothing yet";
    case "loading":
      return "Loading";
    case "success":
      return state.data.join(", "); // data exists only on this member
    case "error":
      return state.error.message;
    default: {
      const unreachable: never = state; // stops compiling the day a status is added
      return unreachable;
    }
  }
}

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; size: number }
  | { kind: "triangle"; base: number; height: number };

function assertNever(value: never): never {
  throw new Error("Unhandled case: " + JSON.stringify(value));
}

function area(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.size ** 2;
    default:
      return assertNever(shape); // error: the triangle member is not assignable to never
  }
}

function fail(message: string): never {
  throw new Error(message);
}

function parsePort(value: string | undefined): number {
  if (value === undefined) fail("PORT is required");
  return Number(value.trim()); // value is string here: fail() cannot return
}

function failDeclared(message: string) {
  throw new Error(message);
}
type A = ReturnType<typeof failDeclared>; // void

const failArrow = (message: string) => {
  throw new Error(message);
};
type B = ReturnType<typeof failArrow>; // never

const user = { name: "Ada", age: 36 };

for (const key of Object.keys(user)) {
  user[key]; // error: a string cannot index { name: string; age: number }
}

// When you own the object and know it has no extra keys, say so once:
const keys = Object.keys(user) as (keyof typeof user)[];
keys.forEach((key) => user[key]); // ok

// Or keep the keys you care about as the source of truth:
const FIELDS = ["name", "age"] as const;
FIELDS.forEach((key) => user[key]); // ok, no assertion

interface Point {
  x: number;
  y: number;
}

function sum(point: Point) {
  let total = 0;
  for (const key of Object.keys(point) as (keyof Point)[]) {
    total += point[key]; // typed as number...
  }
  return total;
}

const labelled = { x: 1, y: 2, label: "origin" };
console.log(sum(labelled)); // compiles: extra properties are allowed on a variable

function schedule(value: string | number) {
  if (typeof value === "string") {
    setTimeout(() => value.toUpperCase()); // error: value might be reassigned before this runs
  }
  value = 5;
}

function scheduleFixed(value: string | number) {
  if (typeof value === "string") {
    const text = value; // a const cannot change, so the narrowing is safe to capture
    setTimeout(() => text.toUpperCase()); // ok
  }
  value = 5;
}

function firstAny(items: any[]): any {
  return items[0];
}

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

const lost = firstAny([1, 2, 3]); // any: the link between input and output is gone
const n = first([1, 2, 3]); // number | undefined, inferred from the argument
const s = first(["a", "b"]); // string | undefined
const explicit = first<Date>([]); // T supplied by hand when there is nothing to infer from

interface ApiResponse<T> {
  data: T;
  error: string | null;
}

class Dictionary<V> {
  #entries = new Map<string, V>();

  set(key: string, value: V) {
    this.#entries.set(key, value);
  }

  get(key: string): V | undefined {
    return this.#entries.get(key);
  }
}

const ages = new Dictionary<number>();
ages.set("ada", 36);
ages.set("bob", "forty"); // error: string is not assignable to number

function longest<T extends { length: number }>(a: T, b: T): T {
  return a.length >= b.length ? a : b;
}

longest([1, 2], [3]); // number[]
longest("alice", "bob"); // "alice" | "bob"
longest(10, 20); // error: number has no 'length' property

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

const user = { id: 1, name: "Ada", tags: ["admin"] };

const name = getProperty(user, "name"); // string
const tags = getProperty(user, "tags"); // string[]
getProperty(user, "email"); // error: "email" is not a key of user

// Pointless: T is used once, so it constrains nothing.
function logValue<T>(value: T): void {
  console.log(value);
}
function logSimpler(value: unknown): void {
  console.log(value);
}

// Useful: T links the argument to the result.
function wrap<T>(value: T): { value: T } {
  return { value };
}

// Dangerous: the caller picks T and nothing checks it.
async function getJson<T>(url: string): Promise<T> {
  const res = await fetch(url);
  return res.json();
}

const user = await getJson<{ id: string }>("/api/user"); // reads like a check; it is a cast

const routes = {
  home: "/",
  settings: "/settings",
  profile: "/u/:id",
} as const;

type Routes = typeof routes; // the type of the value
type RouteName = keyof Routes; // "home" | "settings" | "profile"
type RoutePath = Routes[RouteName]; // "/" | "/settings" | "/u/:id"

function href(to: RouteName): RoutePath {
  return routes[to];
}

interface Order {
  id: string;
  customer: { email: string; addresses: { city: string }[] };
}

type Email = Order["customer"]["email"]; // string
type Address = Order["customer"]["addresses"][number]; // { city: string }

const SIZES = ["sm", "md", "lg"] as const;
type Size = (typeof SIZES)[number]; // "sm" | "md" | "lg"

const isSize = (value: string): value is Size =>
  (SIZES as readonly string[]).includes(value); // one list drives the type and the runtime check

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

type PublicUser = Omit<User, "password">;
type Credentials = Pick<User, "email" | "password">;
type UserPatch = Partial<Omit<User, "id">>; // any subset of fields, never the id
type UsersById = Record<User["id"], PublicUser>;

type Event = "click" | "focus" | "submit" | null;
type PointerOrFocus = Extract<Event, "click" | "focus">; // "click" | "focus"
type RealEvent = NonNullable<Event>; // "click" | "focus" | "submit"

declare function createUser(input: Omit<User, "id">): Promise<User>;
type CreateInput = Parameters<typeof createUser>[0]; // Omit<User, "id">
type Created = Awaited<ReturnType<typeof createUser>>; // User

type MyPartial<T> = { [K in keyof T]?: T[K] };
type MyRequired<T> = { [K in keyof T]-?: T[K] }; // -? removes optionality
type MyReadonly<T> = { readonly [K in keyof T]: T[K] };
type MyPick<T, K extends keyof T> = { [P in K]: T[P] };
type MyRecord<K extends PropertyKey, V> = { [P in K]: V };

type MyExclude<U, M> = U extends M ? never : U; // distributes over each member of U
type MyExtract<U, M> = U extends M ? U : never;
type MyNonNullable<T> = T & {}; // {} is "anything but null and undefined"

type MyOmit<T, K extends PropertyKey> = MyPick<T, MyExclude<keyof T, K>>;

type MyParameters<F> = F extends (...args: infer P) => unknown ? P : never;
type MyReturnType<F> = F extends (...args: never[]) => infer R ? R : never;
type MyAwaited<T> = T extends PromiseLike<infer U> ? MyAwaited<U> : T;

type MyPick<T, K extends keyof T> = { [P in K]: T[P] };
type MyExclude<U, M> = U extends M ? never : U;
type MyOmit<T, K extends PropertyKey> = MyPick<T, MyExclude<keyof T, K>>;
type MyReturnType<F> = F extends (...args: never[]) => infer R ? R : never;
type MyAwaited<T> = T extends PromiseLike<infer U> ? MyAwaited<U> : T;

type Equal<A, B> =
  (<T>() => T extends A ? 1 : 2) extends (<T>() => T extends B ? 1 : 2) ? true : false;
type Expect<T extends true> = T;

interface Todo {
  id: number;
  title: string;
  done: boolean;
}

type Tests = [
  Expect<Equal<MyPick<Todo, "id" | "done">, { id: number; done: boolean }>>,
  Expect<Equal<MyOmit<Todo, "done">, { id: number; title: string }>>,
  Expect<Equal<MyExclude<"a" | "b" | "c", "a">, "b" | "c">>,
  Expect<Equal<MyReturnType<(x: string) => Promise<number>>, Promise<number>>>,
  Expect<Equal<MyAwaited<Promise<Promise<string>>>, string>>,
];

type Flags<T> = { [K in keyof T]: boolean };
type Mutable<T> = { -readonly [K in keyof T]: T[K] };
type Nullable<T> = { [K in keyof T]: T[K] | null };

interface Person {
  name: string;
  age: number;
}

type PersonFlags = Flags<Person>; // { name: boolean; age: boolean }

interface Person {
  name: string;
  age: number;
}

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

type PickByValue<T, V> = {
  [K in keyof T as T[K] extends V ? K : never]: T[K];
};
type StringFields = PickByValue<Person, string>; // { name: string }

type IsString<T> = T extends string ? true : false;

type ElementOf<T> = T extends readonly (infer U)[] ? U : never;
type Item = ElementOf<string[]>; // string

type Unwrap<T> = T extends Promise<infer U> ? U : T;
type A = Unwrap<Promise<number>>; // number
type B = Unwrap<string>; // string: not a promise, returned unchanged

type FirstArg<F> = F extends (first: infer A, ...rest: never[]) => unknown ? A : never;
type C = FirstArg<(id: string, force: boolean) => void>; // string

type ToArray<T> = T extends unknown ? T[] : never;
type Distributed = ToArray<string | number>; // string[] | number[]

type ToArrayTogether<T> = [T] extends [unknown] ? T[] : never;
type Together = ToArrayTogether<string | number>; // (string | number)[]

type IsNeverWrong<T> = T extends never ? true : false;
type IsNever<T> = [T] extends [never] ? true : false;

type X = IsNeverWrong<never>; // never: distributing over an empty union produces nothing
type Y = IsNever<never>; // true

type EventName = "click" | "focus" | "blur";
type HandlerName = `on${Capitalize<EventName>}`; // "onClick" | "onFocus" | "onBlur"

type Side = "top" | "right" | "bottom" | "left";
type Spacing = `${"margin" | "padding"}-${Side}`; // all 8 combinations

type Id = `user_${number}`;
const ok: Id = "user_42";
const bad: Id = "user_abc"; // error: not assignable to `user_${number}`

type PathParams<Path extends string> =
  Path extends `${string}:${infer Param}/${infer Rest}`
    ? Param | PathParams<`/${Rest}`>
    : Path extends `${string}:${infer Param}`
      ? Param
      : never;

type Params = PathParams<"/users/:userId/posts/:postId">; // "userId" | "postId"

declare function navigate<P extends string>(
  path: P,
  params: Record<PathParams<P>, string>,
): void;

navigate("/users/:userId/posts/:postId", { userId: "1", postId: "9" }); // ok
navigate("/users/:userId", { id: "1" }); // error: 'id' is not a parameter of this path

type DeepReadonly<T> = T extends (...args: never[]) => unknown
  ? T // leave functions alone
  : T extends object
    ? { readonly [K in keyof T]: DeepReadonly<T[K]> }
    : T; // primitives are the base case

interface Config {
  api: { url: string; retries: number };
  features: string[];
}

declare const config: DeepReadonly<Config>;

config.api.url = "https://example.com"; // error: 'url' is a read-only property
config.features.push("beta"); // error: 'push' does not exist on 'readonly string[]'

type DeepPartial<T> = T extends object ? { [K in keyof T]?: DeepPartial<T[K]> } : T;

type Json = string | number | boolean | null | Json[] | { [key: string]: Json };

const payload: Json = { user: { tags: ["a", "b"], active: true } }; // ok
const invalid: Json = { createdAt: new Date() }; // error: Date is not Json

class Animal {
  name = "animal";
}
class Dog extends Animal {
  bark() {}
}

// Return types are covariant.
const makeAnimal: () => Animal = (): Dog => new Dog(); // ok

// Parameter types are contravariant.
const handleDog: (dog: Dog) => void = (animal: Animal) => {}; // ok: handles any Animal, so it handles Dogs
const handleAnimal: (animal: Animal) => void = (dog: Dog) => dog.bark(); // error: it may be given a non-Dog

interface Producer<out T> {
  get(): T;
}
interface Consumer<in T> {
  accept: (value: T) => void;
}
interface Cell<in out T> {
  get(): T;
  set: (value: T) => void;
}

class Animal {
  name = "animal";
}
class Dog extends Animal {
  bark() {}
}

const dogs: Dog[] = [new Dog()];
const animals: Animal[] = dogs; // allowed
animals.push(new Animal()); // also allowed... and now dogs[1].bark() throws at runtime

type First<T extends readonly unknown[]> = T extends readonly [infer Head, ...unknown[]] ? Head : never;
type Last<T extends readonly unknown[]> = T extends readonly [...unknown[], infer Tail] ? Tail : never;
type Length<T extends readonly unknown[]> = T["length"];
type TupleToUnion<T extends readonly unknown[]> = T[number];
type Concat<A extends readonly unknown[], B extends readonly unknown[]> = [...A, ...B];
type If<C extends boolean, Then, Else> = C extends true ? Then : Else;

type Equal<A, B> =
  (<T>() => T extends A ? 1 : 2) extends (<T>() => T extends B ? 1 : 2) ? true : false;
type Expect<T extends true> = T;

type Tests = [
  Expect<Equal<First<[1, 2, 3]>, 1>>,
  Expect<Equal<First<[]>, never>>,
  Expect<Equal<Last<["a", "b", "c"]>, "c">>,
  Expect<Equal<Length<readonly ["x", "y"]>, 2>>,
  Expect<Equal<TupleToUnion<["sm", "md", "lg"]>, "sm" | "md" | "lg">>,
  Expect<Equal<Concat<[1], ["a", true]>, [1, "a", true]>>,
  Expect<Equal<If<true, "yes", "no">, "yes">>,
];

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "noImplicitOverride": true,
    "noFallthroughCasesInSwitch": true,

    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "isolatedModules": true,
    "verbatimModuleSyntax": true,
    "noEmit": true,
    "skipLibCheck": true
  }
}

import type { User } from "./models"; // erased entirely
import { createUser, type Role } from "./models"; // createUser stays, Role is erased

export type { User }; // a type re-export must say so
export { createUser };

// A file with no imports or exports is a global script: these are visible everywhere.
declare const __APP_VERSION__: string; // injected by the bundler at build time

declare function gtag(command: "event", name: string, params?: Record<string, unknown>): void;

// Teach the compiler what importing an asset returns.
declare module "*.svg" {
  const url: string;
  export default url;
}

// Minimal types for a JavaScript package that ships none.
declare module "legacy-charts" {
  export function render(el: HTMLElement, data: number[]): void;
}

import type { CSSProperties } from "react";

// Extend a global interface. The wrapper is needed because this file is a module.
declare global {
  interface Window {
    analytics?: { track(event: string): void };
  }
}

window.analytics?.track("page_view"); // typed

// Extend a library's interface: allow CSS custom properties in the style prop.
declare module "react" {
  interface CSSProperties {
    [customProperty: `--${string}`]: string | number;
  }
}

const style: CSSProperties = { "--accent": "#e4572e" }; // ok after the augmentation

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

export class UserStore {
  #users = new Map<number, User>();

  add(user: User) {
    this.#users.set(user.id, user);
  }

  byId(id: number): User | undefined {
    return this.#users.get(id);
  }
}

export default UserStore; // a default export: one per module, imported under any name

import UserStore, { type User } from "./user";

const store = new UserStore();
const ada: User = { id: 1, name: "Ada" };
store.add(ada);

function logged<This, Args extends unknown[], Return>(
  method: (this: This, ...args: Args) => Return,
  context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>,
) {
  const name = String(context.name);
  return function (this: This, ...args: Args): Return {
    console.log("call " + name + "(" + args.join(", ") + ")");
    const result = method.call(this, ...args);
    console.log("return " + result);
    return result;
  };
}

class Calculator {
  @logged
  add(a: number, b: number) {
    return a + b;
  }
}

new Calculator().add(2, 3);

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

async function getUser(id: string): Promise<User> {
  const res = await fetch("/api/users/" + id);
  if (!res.ok) throw new Error("Request failed with " + res.status);
  return (await res.json()) as User; // json() is Promise<any>; validate at a real boundary
}

async function load() {
  // Runs both requests in parallel and keeps each position's type.
  const [user, count] = await Promise.all([getUser("1"), Promise.resolve(3)]);

  try {
    await getUser("missing");
  } catch (error) {
    const message = error instanceof Error ? error.message : String(error);
    console.error(message);
  }

  return { user, count }; // { user: User; count: number }
}

type Resolved = Awaited<ReturnType<typeof getUser>>; // User

type Result<T, E = Error> = { ok: true; value: T } | { ok: false; error: E };

async function attempt<T>(work: () => Promise<T>): Promise<Result<T>> {
  try {
    return { ok: true, value: await work() };
  } catch (error) {
    return { ok: false, error: error instanceof Error ? error : new Error(String(error)) };
  }
}

async function demo() {
  const result = await attempt(() => fetch("/api/health"));
  if (!result.ok) return result.error.message;
  return result.value.status; // narrowed: value only exists when ok is true
}

interface ButtonProps {
  variant?: "primary" | "ghost"; // optional; the default is set below
  disabled?: boolean;
  onClick: () => void;
  children: ReactNode; // anything React can render
}

function Button({ variant = "primary", disabled = false, onClick, children }: ButtonProps) {
  return (
    <button className={"btn btn-" + variant} disabled={disabled} onClick={onClick}>
      {children}
    </button>
  );
}

const ok = <Button onClick={() => {}}>Save</Button>;
const bad = <Button variant="danger" onClick={() => {}}>Delete</Button>; // error: "danger" is not a variant

function Layout({ children }: { children: JSX.Element }) {
  return <main>{children}</main>;
}

const a = <Layout><p>hello</p></Layout>; // ok
const b = <Layout>hello</Layout>; // error: a string is not a JSX.Element

function BetterLayout({ children }: { children: ReactNode }) {
  return <main>{children}</main>;
}

const c = <BetterLayout>hello</BetterLayout>; // ok
const d = <BetterLayout>{null}</BetterLayout>; // ok

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

function Profile() {
  const [count, setCount] = useState(0); // number, inferred
  const [user, setUser] = useState<User | null>(null); // the union has to be stated
  const [tags, setTags] = useState<string[]>([]); // [] alone would be never[]

  const inputRef = useRef<HTMLInputElement>(null); // attached to a DOM node by React
  const timerRef = useRef<number | undefined>(undefined); // a mutable value that survives renders

  useEffect(() => {
    inputRef.current?.focus(); // current is HTMLInputElement | null
    timerRef.current = window.setTimeout(() => setCount((c) => c + 1), 1000);
    return () => window.clearTimeout(timerRef.current);
  }, []);

  return <input ref={inputRef} placeholder={user?.name ?? "Anonymous"} />;
}

type State = { count: number; step: number };

type Action =
  | { type: "increment" }
  | { type: "decrement" }
  | { type: "setStep"; step: number }
  | { type: "reset" };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "increment":
      return { ...state, count: state.count + state.step };
    case "decrement":
      return { ...state, count: state.count - state.step };
    case "setStep":
      return { ...state, step: action.step }; // step exists only on this action
    case "reset":
      return { count: 0, step: 1 };
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0, step: 1 });

  function examples() {
    dispatch({ type: "setStep", step: 5 }); // ok
    dispatch({ type: "setStep" }); // error: 'step' is missing
    dispatch({ type: "multiply" }); // error: not a known action
  }

  return <button onClick={() => dispatch({ type: "increment" })}>{state.count}</button>;
}

function SignupForm({ onSignup }: { onSignup: (email: string) => void }) {
  const [email, setEmail] = useState("");

  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    setEmail(event.target.value);
  }

  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
    if (event.key === "Escape") setEmail("");
  }

  function handleSubmit(event: React.SubmitEvent<HTMLFormElement>) {
    event.preventDefault();
    const data = new FormData(event.currentTarget); // currentTarget is the form
    onSignup(String(data.get("email")));
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" value={email} onChange={handleChange} onKeyDown={handleKeyDown} />
      <button type="submit" onClick={(event) => event.currentTarget.blur()}>
        Sign up
      </button>
    </form>
  );
}

type ButtonProps = ComponentProps<"button"> & {
  variant?: "primary" | "ghost";
};

function Button({ variant = "primary", className, ...rest }: ButtonProps) {
  const classes = ["btn", "btn-" + variant, className].filter(Boolean).join(" ");
  return <button className={classes} {...rest} />;
}

function Toolbar() {
  const saveRef = useRef<HTMLButtonElement>(null);

  return (
    <Button ref={saveRef} type="submit" aria-label="Save" onClick={(e) => e.currentTarget.blur()}>
      Save
    </Button>
  );
}

const wrong = <Button href="/docs">Docs</Button>; // error: a button has no href

const Input = forwardRef<HTMLInputElement, ComponentPropsWithoutRef<"input">>(
  function Input(props, ref) {
    return <input ref={ref} {...props} />;
  },
);

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

function List<T>({ items, getKey, renderItem, empty = null }: ListProps<T>) {
  if (items.length === 0) return empty;
  return (
    <ul>
      {items.map((item) => (
        <li key={getKey(item)}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

const users = [{ id: "1", name: "Ada" }];

const ok = <List items={users} getKey={(user) => user.id} renderItem={(user) => user.name} />;
const bad = <List items={users} getKey={(user) => user.id} renderItem={(user) => user.email} />; // error: no 'email' on the item

interface SelectProps<T> {
  options: T[];
  value: T;
  onChange: (value: T) => void;
  getLabel: (option: T) => string;
}

function Select<T>({ options, value, onChange, getLabel }: SelectProps<T>) {
  return (
    <select
      value={options.indexOf(value)}
      onChange={(event) => {
        const next = options[Number(event.target.value)];
        if (next !== undefined) onChange(next);
      }}
    >
      {options.map((option, index) => (
        <option key={index} value={index}>
          {getLabel(option)}
        </option>
      ))}
    </select>
  );
}

type AvatarProps =
  | { kind: "image"; src: string; alt: string }
  | { kind: "initials"; name: string };

function Avatar(props: AvatarProps) {
  if (props.kind === "image") {
    return <img src={props.src} alt={props.alt} />;
  }
  return <span>{props.name.slice(0, 2).toUpperCase()}</span>;
}

const a = <Avatar kind="image" src="/ada.png" alt="Ada" />; // ok
const b = <Avatar kind="initials" name="Ada Lovelace" />; // ok
const c = <Avatar kind="initials" src="/ada.png" />; // error: wrong props for this variant

type ActionProps =
  | { href: string; onClick?: never }
  | { onClick: () => void; href?: never };

function Action(props: ActionProps & { children: ReactNode }) {
  return props.href !== undefined ? (
    <a href={props.href}>{props.children}</a>
  ) : (
    <button onClick={props.onClick}>{props.children}</button>
  );
}

const link = <Action href="/docs">Docs</Action>; // ok
const both = <Action href="/docs" onClick={() => {}}>Docs</Action>; // error: cannot pass both

type BoxProps<E extends ElementType> = {
  as?: E;
  children?: ReactNode;
} & Omit<ComponentProps<E>, "as" | "children">;

function Box<E extends ElementType = "div">({ as, children, ...rest }: BoxProps<E>) {
  const Tag: ElementType = as ?? "div";
  return <Tag {...rest}>{children}</Tag>;
}

const plain = <Box className="card">A div by default</Box>;
const link = <Box as="a" href="/docs">A link</Box>; // href is allowed: E is "a"
const wrong = <Box as="button" href="/docs">Nope</Box>; // error: a button has no href

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

interface AuthContextValue {
  user: User | null;
  signIn: (user: User) => void;
  signOut: () => void;
}

const AuthContext = createContext<AuthContextValue | null>(null);

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  const value = useMemo<AuthContextValue>(
    () => ({ user, signIn: setUser, signOut: () => setUser(null) }),
    [user],
  );

  return <AuthContext value={value}>{children}</AuthContext>;
}

export function useAuth(): AuthContextValue {
  const value = useContext(AuthContext);
  if (value === null) throw new Error("useAuth must be used inside <AuthProvider>");
  return value;
}

function Greeting() {
  const { user } = useAuth(); // no null check on the context itself
  return <p>{user ? "Hello, " + user.name : "Signed out"}</p>;
}

function useToggle(initial = false) {
  const [on, setOn] = useState(initial);
  const toggle = useCallback(() => setOn((value) => !value), []);
  return [on, toggle] as const; // readonly [boolean, () => void]
}

function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    const stored = window.localStorage.getItem(key);
    return stored === null ? initial : (JSON.parse(stored) as T);
  });

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue] as const;
}

function Settings() {
  const [open, toggleOpen] = useToggle();
  const [theme, setTheme] = useLocalStorage<"light" | "dark">("theme", "dark");

  return (
    <button onClick={toggleOpen} onDoubleClick={() => setTheme("light")}>
      {open ? "Close" : "Open"} ({theme})
    </button>
  );
}

interface WithUserProps {
  user: { id: string; name: string };
}

declare function useCurrentUser(): WithUserProps["user"];

function withUser<P extends WithUserProps>(Wrapped: React.ComponentType<P>) {
  function WithUser(props: Omit<P, keyof WithUserProps>) {
    const user = useCurrentUser();
    return <Wrapped {...(props as P)} user={user} />;
  }
  WithUser.displayName = "withUser(" + (Wrapped.displayName ?? Wrapped.name) + ")";
  return WithUser;
}

function Dashboard({ user, title }: WithUserProps & { title: string }) {
  return <h1>{title + ": " + user.name}</h1>;
}

const DashboardWithUser = withUser(Dashboard);

const ok = <DashboardWithUser title="Home" />; // user is supplied by the HOC
const bad = <DashboardWithUser />; // error: 'title' is missing

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

function Greeting({ name }: { name: string }) {
  return <h1 className="title">Hello, {name}</h1>;
}

import { jsxs } from "react/jsx-runtime";

function Greeting({ name }) {
  return jsxs("h1", { className: "title", children: ["Hello, ", name] });
}

// ...which returns an element, a plain object:
// { type: "h1", props: { className: "title", children: ["Hello, ", "Ada"] }, key: null }

// A component: a function. Defined once.
function Welcome({ name }: { name: string }) {
  return <h1>Hello, {name}</h1>;
}

// An element: a plain object. Created on every render.
const element = <Welcome name="Ada" />;
// { type: Welcome, props: { name: "Ada" }, key: null }

function Page() {
  // A new function identity on every render of Page:
  // React sees a different component type and remounts it, wiping its state.
  function SearchBox() {
    const [query, setQuery] = useState("");
    return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
  }

  return <SearchBox />;
}