Open code, practice, and notes →
Download source with English comments · for reading
TypeScript · 08 Modeling Async State with Discriminated Unions
Series contents · Technology map
Stage: Unions and Generics · Editable example · Storage ID: typescript-step-08
Goals and learning outcomes
- Record the state order for success and failure paths.
- Compilation fails if an error field is incorrectly added to loading.
Prerequisites
Work and experiment records from Unit 7, “unknown and Safe Access”
Key concepts and explanations
Fields by State
Putting data only in the success state reduces impossible combinations. Whether loading needs previous data is a separate design decision.
Transition Functions
Returning the next state from an event lets you collect transition rules in one place. Handle disallowed transitions explicitly.
Practice setup
First check the execution scope guidance on the example screen. The following environment is for extending the assignment in a separate project. Implement it yourself in a separate local project and check it with browser developer tools and tsc --noEmit. Record the installed tsc version in a separate TypeScript project. Enable strict in tsconfig.json and check with tsc --noEmit, then open the runtime exercise using compiled output or a local development server. Do not assume the browser executes TS type annotations directly.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- In request-state.ts, prepare conditions for two paths from idle: start then success, and start then failure.
- Transition state with start·resolve·reject events and calculate UI strings.
- Run with two paths from idle: start then success, and start then failure. Results to check: Record the state order for success and failure paths. Compilation fails if an error field is incorrectly added to loading. Record expected and actual results separately.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| Event | resolve in loading | resolve in idle | Pre-run hypothesis: the invalid transition will be rejected according to the chosen policy. Keep other conditions fixed and record the actual result separately after running. |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- Record the state order for success and failure paths.
- Compilation fails if an error field is incorrectly added to loading.
Self-check
- How would you represent a state that retains previous data?
- What combinations arise when tags and optional fields are mixed?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
The preview is a JavaScript runtime boundary experiment. It does not run TypeScript diagnostics. Check lesson.ts locally with tsc --strict --noEmit --lib ES2023,DOM.
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.
Next learning
Previous: unknown and Safe Access · Next: Finding Missing Branches with never