Learn / TypeScript and React Product Systems
TypeScript Component Foundations
Use props, unions, and small component contracts to make UI states explicit before screens grow complex.
Course: TypeScript and React Product Systems. Level: Intermediate. Topic: Frontend systems.
Stage: basic - Basic UI contracts - Typed React component contracts. Start with data shapes and UI boundaries that make a feature reviewable before state and effects spread.
Outcomes
- Type component props clearly.
- Represent loading, empty, error, and ready states.
- Avoid accidental any at API boundaries.
Concepts
- props contract
- discriminated union
- unknown JSON
- component composition
Concept flow
Show how typed react component contracts moves from trigger to implementation outcome in TypeScript React.
- API data
- Parser
- Remote state
- Component props
- Rendered UI
Session flow
- Model props contract (concept, 8 min) — Name the decisions behind props contract before writing code.
- Type component props clearly.
- Explain where props contract belongs in learning analytics dashboard.
- Build the vertical slice (walkthrough, 14 min) — Implement the smallest useful slice in learning/remote-data.ts.
- Represent loading, empty, error, and ready states.
- Connect discriminated union to a working example.
- Verify and harden (exercise, 9 min) — Render an empty state separately from loading.
- Avoid accidental any at API boundaries.
- Record one risk or follow-up before moving on.
Code example
TypeScript in learning/remote-data.ts.
type RemoteData<T> =
| { status: "idle" }
| { status: "loading" }
| { status: "ready"; data: T }
| { status: "error"; message: string };
function titleFor<T>(state: RemoteData<T>) {
return state.status === "ready" ? "Loaded" : state.status;
}
Walkthrough examples
- TypeScript Component Foundations in a learning analytics dashboard — A team is extending a resilient React product surface and needs this lesson's pattern to be clear enough for review, testing, and future maintenance.
- File: learning/remote-data.ts
- File: tests/typescript-component-foundations.spec
- File: docs/typescript-react/typescript-component-foundations.md
- Start from the provided TypeScript snippet and make the intent visible in names and boundaries.
- Apply the checklist item "Type props by product meaning" before adding extra behavior.
- Write down how the implementation changes when discriminated union fails or becomes slow.
Practice
- Convert a loose props object into an interface.
- Model one async panel with a union.
- Render an empty state separately from loading.
Checklist
- Type props by product meaning
- Parse external data
- Render every state
- Remove stray any usage
Quiz prompts
- Where should unknown API JSON usually become trusted typed data? — Parsing near the API boundary keeps the rest of the UI working with known shapes.
- A teammate wants to hide props contract inside a convenient helper. What should you check first? — Place props contract at the boundary that keeps learning analytics dashboard behavior explicit, testable, and reviewable.
- Which artifact best proves this TypeScript React lesson is ready for review? — Production-ready learning needs evidence: a test, trace, command, screenshot, or log that catches the risk again.
- Basic UI contracts: a teammate says the happy path works, but "API parsing boundary" is still implicit. What should you ask for before merging? — API parsing boundary belongs in the basic stage only when the decision is visible, testable, and tied to a realistic failure mode.
- A reviewer has five minutes to evaluate this basic TypeScript React slice. Which evidence is strongest? — Build the basic React feature contract: parsed input, discriminated remote state, presentational components, and a short note naming what cannot enter the render boundary.
Flashcards
- Basic UI contracts: what decision does "API parsing boundary" force you to make? Parse unknown server data once so components render trusted product types. Evidence prompt: Wrap one API response in a parser and pass only a typed view model into the component.
- Basic UI contracts: what decision does "Discriminated remote data" force you to make? Represent loading, ready, empty, and error as a union instead of scattered booleans. Evidence prompt: Replace three nullable fields or booleans with one discriminated state type.
- Basic UI contracts: what decision does "Presentational component contract" force you to make? Keep rendering components small, named, and testable by passing only the props they actually display. Evidence prompt: Extract one presentational component and document its required and optional props.
- In TypeScript React, what should you remember about props contract? props contract matters here because it supports "Type component props clearly.".
- In TypeScript React, what should you remember about discriminated union? discriminated union matters here because it supports "Represent loading, empty, error, and ready states.".
- In TypeScript React, what should you remember about unknown JSON? unknown JSON matters here because it supports "Avoid accidental any at API boundaries.".
- In TypeScript React, what should you remember about component composition? component composition matters here because it supports "Type component props clearly.".
Labs
- Ship a typescript component foundations slice — Extend a resilient React product surface with a small but reviewable feature that proves the lesson's architecture in code.
- Build the basic React feature contract: parsed input, discriminated remote state, presentational components, and a short note naming what cannot enter the render boundary.
- Wrap one API response in a parser and pass only a typed view model into the component.
- Replace three nullable fields or booleans with one discriminated state type.
- Extract one presentational component and document its required and optional props.
- Convert a loose props object into an interface.
- Model one async panel with a union.
- The lab demonstrates the basic ui contracts outcome without skipping earlier contract evidence.
- Each subtopic has a concrete artifact: API parsing boundary, Discriminated remote data, Presentational component contract.
- The review notes explain how this level changes ownership, verification, or operational risk.
Challenge
- Review-ready typescript component foundations (Core) — Build the basic React feature contract: parsed input, discriminated remote state, presentational components, and a short note naming what cannot enter the render boundary.
- All checklist items are either implemented or documented with a reason.
- The change can be understood from learning/remote-data.ts plus one short note.
- The concept diagram names ownership, failure handling, and verification points.
- A teammate could run the verification steps without asking for hidden context.
Canonical lesson URL