Pathwise

Manuals / TypeScript / Chapter 3

A · Setup · beginner · Week 1–2 · Chapter 3 of 11

Types, interfaces & inference

type and interface define object shapes. Use interface for object contracts, type for unions and computed shapes. Inference fills types when obvious. Annotate public API boundaries; let inference handle locals.

Path progress
20%

Step 1 of 5

Object shapes

interface User { id: number; name: string; email?: string }. Optional with ?. readonly for immutability hints.

Object shapesDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Object shapesdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Example

interface User {
  id: number
  name: string
  email?: string
  readonly createdAt: string
}

Do this now

Define User, Product, and Order interfaces for a shop domain. Include optional fields.

Was this step clear?
Chapter learning outcomes
  • type vs interface
  • Optional & readonly
  • Type inference
  • Function types
  • Literal types

Clear these before you leave

Side quest

Typed models

Create types/models.ts with 5+ interfaces for your fetch app domain. Use them in api.ts.