TypeScript examples
The TypeScript hub holds examples where the type system is part of the answer rather than decoration. You will find narrowing of unknown JSON, discriminated unions for API results, generic request wrappers, typed React props and context, and validation rules expressed as types the compiler can check. Every entry explains which TypeScript version features it assumes, shows the exact declaration order that compiles, and warns about the places where a cast would hide a real runtime risk. Browse the task groups to find the boundary you need, then read the explanation to understand why the compiler accepts the solution and when it should reject a variant.
7 published examples in 4 taskgroups. Hub pages list every Example in exactly one task group.
Fetch API data
1 exampleSend a request, await the response, and handle status, timeout, and cancellation behaviour.
Type a generic fetch hook that returns a known payload
Wrap fetch in a hook whose generic payload type is proven by a runtime predicate, so a component only renders data it has already accepted.
Manage React state
2 examplesDeclare, derive, update, and share component state inside the React render model.
Memoise a derived value with typed dependencies
Give a memoised derived value a typed dependency list and a stable key function, and see why dependency identity rather than the memo call decides whether the cache is ever reused.
Type a React context provider and its consumer
Type a React context with a null sentinel, expose a provider and a hook, and turn a missing provider into one named error instead of a screen full of undefined props.
Transform data
3 examplesReshape collections and records in memory into the structure the next step needs.
Narrow an unknown API response with type guards
Layer small type predicates over an unknown response and return a narrowing result, so the compiler only exposes fields a runtime check has accepted.
Normalize an API payload into a typed list
Unwrap whichever envelope an API returns, check each row field by field, and get one typed list plus a named reason for every entry that was dropped.
Transform server records into the view model a component renders
Map validated server records onto the fields a component renders, keeping fallback text, badge labels, and time formatting in one reviewable function instead of in the markup.
Validate form input
1 exampleDecide whether entered data is acceptable and report the result to the person filling the form.
Type the validation state of a controlled form
Key field errors and touched flags off the form's own field names, so a renamed input cannot keep an orphaned message and the compiler lists every field left unhandled.
Adjacent navigation
- Parent: Home
- Other language hubs: CSS
- Other language hubs: HTML
- Other language hubs: JavaScript
- Related topic: Data Transformation
- Related topic: Fetch and HTTP
- Related topic: Form Validation
- Related topic: React State
- Or search all examples: Search