Cartwheel’s shipping zones live in a config object. The first version of the code described them twice: once as data, once as types.
\nconst SHIPPING_ZONES = {\n domestic: { countries: ['US', 'CA'], feeCents: 499 },\n gulf: { countries: ['AE', 'SA'], feeCents: 1299 },\n europe: { countries: ['GB', 'DE'], feeCents: 999 },\n};\n\ntype Zone = 'domestic' | 'gulf' | 'europe'; // written by handSix months later someone added a levant zone to the object and forgot the type. Nothing failed to compile; the new zone just could not be selected anywhere. Every hand-written copy of a fact is a copy that can drift. This lesson covers the three operators that let you write the fact once and derive the rest.
In a type position, typeof takes a value and gives you the type TypeScript inferred for it. It is not the JavaScript typeof operator (which returns strings like 'object' at runtime); it only exists at compile time.
const SHIPPING_ZONES = {\n domestic: { countries: ['US', 'CA'], feeCents: 499 },\n gulf: { countries: ['AE', 'SA'], feeCents: 1299 },\n europe: { countries: ['GB', 'DE'], feeCents: 999 },\n} as const;\n\ntype ShippingZones = typeof SHIPPING_ZONES;\n// { readonly domestic: { readonly countries: readonly ['US', 'CA']; readonly feeCents: 499 }; … }as const matters here, as it did in Literal Types, as const and satisfies. Without it, countries would be string[] and feeCents would be number, and you would lose the details worth deriving.
typeof works on functions too: typeof formatPrice is the function’s full signature, which you can feed to utility types such as ReturnType<typeof formatPrice>. You will build ReturnType yourself in two lessons.
When should the value be the source and the type derived, rather than the other way round? Use typeof when the data is the definition: lookup tables, zone configs, lists of options that also render in the UI. Write the type first when the shape is a contract with someone else, such as an API payload, and check values against it.
keyof T is the union of T’s property names:
type Zone = keyof typeof SHIPPING_ZONES; // 'domestic' | 'gulf' | 'europe'Add levant to the object and Zone updates itself. That is the whole point.
Two details are worth knowing. First, for a type with an index signature such as Record<string, number>, keyof gives string (and string | number for { [k: string]: … }, because JavaScript converts numeric keys to strings). Second, keyof on a union gives only the keys every member has. keyof (ShippedOrder | CancelledOrder) is 'id' | 'status', because reading trackingNumber from something that might be a cancelled order is not safe.
T[K] looks up the type of property K in T, using the same bracket syntax as runtime property access:
type GulfZone = ShippingZones['gulf']; // { readonly countries: …; readonly feeCents: 1299 }\ntype GulfFee = ShippingZones['gulf']['feeCents']; // 1299\ntype ZoneConfig = ShippingZones[Zone]; // union of all three configs\ntype FeeCents = ShippingZones[Zone]['feeCents']; // 499 | 1299 | 999\ntype ShippingCountry = ShippingZones[Zone]['countries'][number]; // 'US' | 'CA' | 'AE' | …Indexing with a union gives a union of the results, so ShippingZones[Zone] is “the value type of any zone”. The idiom (typeof X)[keyof typeof X] is how you get the union of an object’s values, and it comes up often enough that many codebases name it ValueOf<T>.
Arrays and tuples are indexed by number: T[number] is the element type. That is the (typeof COUNTRIES)[number] you used in section 1, and the last line above, which digs through two levels of objects and one array to collect every country in every zone.
The same trick works on API types you did not write. If a generated client gives you a big CheckoutResponse, you can name the line-item type as CheckoutResponse['lines'][number] instead of copying its fields.
Sooner or later you will write this and be annoyed:
\nfor (const zone of Object.keys(SHIPPING_ZONES)) {\n SHIPPING_ZONES[zone]; // Error: 'string' can't be used to index type …\n}Object.keys returns string[], not Zone[], and this is deliberate. Remember structural typing: a value whose type is { a: number } can be an object with ten more properties at runtime. If Object.keys promised (keyof T)[], it would be lying about those ten.
For a const object you defined yourself, with no way for extra keys to sneak in, a local cast is reasonable and honest: Object.keys(SHIPPING_ZONES) as Zone[]. For objects that came from elsewhere, keep string and check each key.
In the exercise you will derive five types from Cartwheel’s shipping config and API response. Next lesson goes one step further: instead of reading properties from a type, you will transform every property of a type at once.
\n","toc":[{"id":"sec-1","text":"typeof: from values to types","level":2},{"id":"sec-2","text":"keyof: the names of the properties","level":2},{"id":"sec-3","text":"Indexed access: the type of a property","level":2},{"id":"sec-4","text":"Why Object.keys returns string[]","level":2}],"takeaways":["In a type position,typeof value gives the type TypeScript inferred for that value, bridging runtime code into the type system.","keyof T is the union of T’s property names, and T[K] is the type of the property (or properties) named by K.","(typeof CONFIG)[keyof typeof CONFIG] gives the union of an object’s value types, and T[number] gives an array’s element type.","Object.keys returns string[] on purpose: structural typing means an object can have more keys than its type lists."],"further":[{"title":"Keyof Type Operator","url":"https://www.typescriptlang.org/docs/handbook/2/keyof-types.html"},{"title":"Typeof Type Operator","url":"https://www.typescriptlang.org/docs/handbook/2/typeof-types.html"},{"title":"Indexed Access Types","url":"https://www.typescriptlang.org/docs/handbook/2/indexed-access-types.html"}],"quiz":[{"q":"What is Zone?
const SHIPPING_ZONES = {\n domestic: { feeCents: 499 },\n gulf: { feeCents: 1299 },\n} as const;\ntype Zone = keyof typeof SHIPPING_ZONES;'domestic' | 'gulf'","why":"Correct. typeof turns the value into its type, and keyof takes the union of its property names."},{"text":"string","why":"keyof on an object type with known properties gives those exact names, not string. You get string only from an index signature."},{"text":"{ feeCents: 499 } | { feeCents: 1299 }","why":"That is the union of the values, which you would get with (typeof SHIPPING_ZONES)[Zone]."},{"text":"It is an error, because keyof needs a type, not a value.","why":"typeof in a type position converts the value first, so keyof does receive a type."}],"answer":0},{"q":"type CheckoutResponse = { lines: { sku: string; qty: number }[] }. Which type is { sku: string; qty: number }?
CheckoutResponse.lines[0]","why":"Dot access does not exist in type positions; TypeScript reads CheckoutResponse.lines as a namespace lookup and fails."},{"text":"CheckoutResponse['lines']","why":"That is the whole array type, { sku: string; qty: number }[], not one element."},{"text":"keyof CheckoutResponse['lines']","why":"That gives the array’s keys (number, 'length', 'map' …), not its elements."},{"text":"CheckoutResponse['lines'][number]","why":"Correct. Indexing an array type with number gives its element type."}],"answer":3},{"q":"What is keyof (ShippedOrder | CancelledOrder) when both have id and status, only ShippedOrder has trackingNumber, and only CancelledOrder has cancelReason?
'id' | 'status' | 'trackingNumber' | 'cancelReason'","why":"That would let you read trackingNumber from a value that might be a cancelled order, which is unsafe."},{"text":"'id' | 'status'","why":"Correct. A key of a union must be a key of every member, so only the shared properties remain."},{"text":"never, because the two types are different","why":"The members share id and status, so those keys survive."}],"answer":1},{"q":"Why does Object.keys(order) return string[] instead of (keyof Order)[]?
keyof is not available in lib files.","why":"Lib files use keyof all over the place; this is not a technical limitation."},{"text":"Because a value of type Order can have extra properties at runtime that the type does not list.","why":"Correct. Structural typing lets a DetailedOrder pass as an Order, so its extra keys would show up at runtime."}],"answer":2}],"exercise":{"kind":"web","mode":"ts","starter":{"ts":"const SHIPPING_ZONES = {\n domestic: { countries: ['US', 'CA'], feeCents: 499 },\n gulf: { countries: ['AE', 'SA'], feeCents: 1299 },\n levant: { countries: ['EG', 'JO'], feeCents: 899 },\n europe: { countries: ['GB', 'DE'], feeCents: 999 },\n} as const;\n\n// Shape of the checkout API response (generated from the backend's schema).\ntype CheckoutResponse = {\n order: { id: number; status: 'processing' | 'shipped'; totalCents: number };\n lines: { sku: string; quantity: number; unitPriceCents: number }[];\n};\n\ntype Zone = string;\ntype ShippingCountry = string;\ntype FeeCents = number;\ntype LineItem = unknown;\ntype CheckoutStatus = string;\n\nfunction zoneFor(country: ShippingCountry): Zone {\n for (const [zone, config] of Object.entries(SHIPPING_ZONES)) {\n if ((config.countries as readonly string[]).includes(country)) return zone;\n }\n throw new Error(`No shipping zone for ${country}`);\n}\n\nfunction feeFor(country: ShippingCountry): FeeCents {\n return SHIPPING_ZONES[zoneFor(country)].feeCents;\n}\n\n// ---- Type tests (do not edit) ----\ntype T1 = ExpectReplace the five hand-written types with types derived from SHIPPING_ZONES and CheckoutResponse, so that adding a zone or changing the API type updates them automatically:
Zone: the zone names.ShippingCountry: every country in every zone.FeeCents: every zone’s fee, as literal numbers.LineItem: one element of CheckoutResponse['lines'].CheckoutStatus: the type of the order’s status.Then make zoneFor and feeFor compile with the new types (no any).
typeof SHIPPING_ZONES; keyof of that gives the zone names.","Index with the union of zone names to reach every config at once: ShippingZones[Zone]['feeCents']. Arrays are indexed with number.","Object.entries and Object.keys give you string keys. Since SHIPPING_ZONES is your own as const object, Object.keys(SHIPPING_ZONES) as Zone[] is an honest, local cast."],"explanation":"typeof brings the config object into the type world, keyof lists its zone names, and indexed access with the union Zone reaches into every zone at once, so ShippingZones[Zone]['countries'][number] collects all countries. CheckoutResponse['lines'][number] names the line-item type without copying its fields. Object.keys returns string[] because objects can carry extra keys at runtime; for a const object you defined, casting to Zone[] is safe, and the cast sits next to a comment saying why.
zoneFor finds the right zone for a country","fee":"feeFor returns the zone’s fee"}},"words":755,"readMinutes":4}