Typing the App — Programuoki

Code

src/types.ts — state as a union

In the code column — the state types, added to src/types.ts. This is where the most powerful idea lives.

LoadStatus as a union:

export type LoadStatus =
  | { state: 'idle' }
  | { state: 'loading' }
  | { state: 'loaded' }
  | { state: 'error'; message: string; retryable: boolean };

Compare it to the vanilla version: there isLoading (a boolean) and error (a string) were separate. Nothing stopped:

isLoading = true;
error = 'Network failed';   // both at once — what do you render?!

The UI rendered that as nonsense (a spinner AND an error). In the union that combination doesn't exist: LoadStatus is either loading or error — never both. And the error variant forces a message and retryable; you can't have "an error with no message".

AppState — the whole state in one type (instead of the vanilla dozen loose lets). Notice saved: SavedPicture[], where SavedPicture has rating: Rating — so a rating can only be 0–5.

How you use it (narrowing on state):

switch (status.state) {
  case 'loading': showSpinner(); break;
  case 'error':   showError(status.message); break;   // message is GUARANTEED here
  case 'loaded':  render(); break;
  case 'idle':    break;
}

status.message is reachable only in the error branch — elsewhere it doesn't exist, and the compiler knows it.

Tip. Why { state: 'error'; message; retryable } and not just message?? Because this way the type guarantees: if the state is error, a message MUST be there. With message? you could have "an error with no message" and render a blank screen again. The type encodes not just "which fields are possible", but "which fields belong together".

types.ts MODIFY 47 lines changed

Edit this file in src/

// Types for NASA's APOD API. This is where TypeScript earns its keep: we encode
// what the API ACTUALLY returns, and the compiler enforces what we used to have
// to remember.

/** An APOD entry that is an IMAGE. */
export interface ApodImage {
  media_type: 'image';        // the discriminant — a literal, not just `string`
  date: string;               // YYYY-MM-DD — also the unique id
  title: string;
  explanation: string;
  url: string;
  hdurl?: string;             // only images have a high-res version — and not always
  copyright?: string;         // absent for public-domain images
}

/** An APOD entry that is a VIDEO (usually a YouTube/Vimeo embed). */
export interface ApodVideo {
  media_type: 'video';
  date: string;
  title: string;
  explanation: string;
  url: string;
  copyright?: string;
  // NOTE: no `hdurl`. Videos never have one — the type says so, so you can't reach for it.
}

/**
 * A DISCRIMINATED UNION.
 *
 * `media_type` is the discriminant: once you check it, TypeScript NARROWS the
 * type and knows exactly which fields exist.
 *
 *   if (pic.media_type === 'image') {
 *     pic.hdurl   // ✅ exists here (string | undefined)
 *   } else {
 *     pic.hdurl   // ❌ compile error — videos have no hdurl
 *   }
 *
 * The bug class "I forgot the media_type check" becomes impossible to write.
 */
export type Apod = ApodImage | ApodVideo;

/**
 * A LITERAL UNION instead of `number`.
 *
 * `rating: number` would let you write `rating = 47` or `rating = -3`. This
 * makes those a compile error. The set of legal values IS the type.
 */
export type Rating = 0 | 1 | 2 | 3 | 4 | 5;

// ---------- The application state, in one shape (this step) ----------
// Replacing the vanilla dozen loose `let` variables.

export type SortKey = 'title' | 'date' | 'rating';
export type SortDirection = 'asc' | 'desc';

/**
 * Loading state as a UNION, not booleans.
 *
 * The vanilla code had `isLoading` and `error` as SEPARATE variables. Nothing
 * stopped `isLoading = true` AND `error = 'failed'` at the same time — an
 * impossible state the UI would render as nonsense. Modelled as a union, that
 * combination CANNOT be constructed. This is "make illegal states unrepresentable".
 */
export type LoadStatus =
  | { state: 'idle' }
  | { state: 'loading' }
  | { state: 'loaded' }
  | { state: 'error'; message: string; retryable: boolean };

/** A saved picture, plus the user's own annotations. */
export interface SavedPicture {
  picture: Apod;
  rating: Rating;             // 0–5, enforced — not any number
  notes: string;
  tags: string[];
  savedAt: string;
}

/** The whole application state, in one shape. */
export interface AppState {
  pictures: Apod[];
  saved: SavedPicture[];
  status: LoadStatus;

  // gallery
  searchQuery: string;
  daysToShow: number;

  // collection
  collectionQuery: string;
  sortKey: SortKey;
  sortDirection: SortDirection;
  currentPage: number;
  pageSize: number;
}