TypeScript Lab Examples

Every demo is a single self-contained file with a purpose statement, didactic comments, and expected output. .ts demos run directly with node <file> (Node ≥ 22.18 has type stripping built in) or npx tsx <file> for full language support. .html demos are self-contained — open them directly in a browser. The Source column opens the file in the code viewer; the Preview column runs it.

Phase 1 — Foundations: erasure and strict mode

#DescriptionSourcePreview
01Type erasure — compile one file and see that no type syntax survives into the emitted JavaScript01_type_erasure.ts—
02Strict mode catches the classic undefined-property bug at compile time — uncomment lines to watch it fail02_strict_catches_bugs.ts—

Phase 2 — The type system: unions, state machines, generics

#DescriptionSourcePreview
03Unions and narrowing — typeof/in checks that the compiler understands, no casts03_unions_and_narrowing.ts—
04Discriminated-union fetch state — impossible states unrepresentable, exhaustive switch with never04_discriminated_union_state.ts—
05Generic identity, constraints and keyof — reusable functions the checker keeps type-accurate05_generic_identity_and_constraints.ts—

Phase 3 — Advanced type programming

#DescriptionSourcePreview
06Mapped and conditional types — patch objects, string-field filters and Unwrap computed from one source type06_mapped_and_conditional.ts—
07Template literal types — event names whose cross product the compiler computes; typos become compile errors07_template_literal_types.ts—

Phase 4 — Production: errors and parsing

#DescriptionSourcePreview
08Result error handling — failure as a typed return value; the compiler refuses to let a caller forget the error branch08_result_error_handling.ts—
09A 40-line Zod core — "parse, don't validate": composable parsers that return the checked value, not just a verdict09_minimal_validator.ts—

Phase 5 — Practice: classes, DOM, and state stores

#DescriptionSourcePreview
10Bank account — private fields and Result returns make an overdrawn account impossible to construct10_bank_account.ts—
11Greeter widget — typed DOM access: the null guard the checker demands, shown next to the JS it emits. Runs in the browser11_greeter_widget.htmlpreview
12Todo store — a discriminated-union action set driving a unidirectional store, with the reducer shown both typed and emitted. Runs in the browser12_todo_store.htmlpreview

How to study it

  1. Read the header comment first. Every demo states its purpose, the run command, and what you should learn from it — then run it and check the output against the expectations in the comments.
  2. Break it on purpose. Each demo has commented-out lines that fail the checker (demos 02, 05, 07) or show a guard. Uncomment them and read the error — the diagnostics teach more than the happy path does.
  3. Compare source and emit. Run npx tsc 01_type_erasure.ts and diff the output against the original; the erased lines are exactly the type system's design-time half.
  4. Rebuild from memory. After studying a demo, delete the file and reproduce it. If you cannot, the missing piece names the lesson to re-read — each demo links back to one.