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": true—tscemits no.js. Why? Because Vite does the bundling. Heretscis only a checker. Two tools, two jobs:tscchecks types, Vite compiles and bundles."include": ["src"]— we only check thesrc/folder (where the.tsfiles 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 (
.tsin 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 withnpm run dev, notpython -m http.server— Vite compiles.tsto.json the fly. That's the "build step" we didn't have for 14 lessons; the types brought it.