Code

tsconfig.json — the compiler

In the code column — tsconfig.json, the compiler's config. The key line:

"strict": true

Without strict mode, TypeScript catches almost nothing — it's just "JavaScript with extra syntax." With it, the compiler starts demanding the two guards the vanilla app forgot. (And this is deliberately only the baseline: lesson 18 turns on even stricter flags — noUncheckedIndexedAccess, exactOptionalPropertyTypes — one by one, so you can watch what each one catches.)

Two lines worth noticing:

  • "noEmit": truetsc emits no .js. Why? Because Vite does the bundling. Here tsc is only a checker. Two tools, two jobs: tsc checks types, Vite compiles and bundles.
  • "include": ["src"] — we only check the src/ folder (where the .ts files will live).

Verify. Move one vanilla file to .ts (say detail.ts with pic.hdurl and pic.copyright.trim()), then:

npm run typecheck

You should see exactly those two errors:

src/views/detail.ts:14  TS2551: Property 'hdurl' does not exist on type 'Apod'.
src/views/detail.ts:41  TS18048: 'pic.copyright' is possibly 'undefined'.

The compiler just found real bugs in code that worked. How to fix them (a discriminated union, optional fields) is lesson 16.

Gotcha (.ts in a browser). Try <script type="module" src="detail.ts"> directly — the browser won't load it, or throws: it doesn't understand .ts. The types must be stripped out first. So from now on we serve with npm run dev, not python -m http.server — Vite compiles .ts to .js on the fly. That's the "build step" we didn't have for 14 lessons; the types brought it.