Code

package.json — the tooling arrives

In the code column — package.json. It's the first tooling file in the whole course. Until now we had only .html, .css and .js, served statically. Now we need Node and npm to install TypeScript and Vite.

npm install        # reads package.json, downloads typescript + vite
npm run dev        # the Vite dev server (replaces python -m http.server)

scripts is a list of commands:

  • devvite: a dev server with hot reload (HMR). Vite compiles .ts to .js on the fly.
  • typechecktsc --noEmit: runs only the type check, emits nothing. This is the command that will show our two errors.
  • buildtsc --noEmit && vite build: first type-check, then bundle for production. The && means — if the types fail, the build stops (the bug never reaches production).

Two devDependencies — typescript and vite. They're devDependencies (not dependencies) because they're build tools: the final app in the browser doesn't need them — they only turn your .ts into .js.

Tip. Notice "type": "module". It tells Node that import/export here are ES modules (like all course), not the old require. The same module model we've used since lesson 1 — just now through tooling.