Cartwheel’s checkout has an address form. The address type is simple:
\ntype Address = { line1: string; city: string; country: string; postcode?: string };The form needs more than the address, though. It needs, for each field, its current value, a validation error and whether the user has touched it. The PATCH endpoint needs a version where every field is optional. The review screen needs a frozen copy. You could write three more types by hand, each repeating the four field names, and update all of them whenever Address changes. Or you could write each one once, as a transformation. That is what a mapped type is: a loop over keys, at the type level.
type FieldState<T> = {\n [K in keyof T]: { value: T[K]; error: string | null; touched: boolean };\n};\n\ntype AddressForm = FieldState<Address>;\n// {\n// line1: { value: string; error: string | null; touched: boolean };\n// city: { value: string; … };\n// country: { value: string; … };\n// postcode?: { value: string | undefined; … };\n// }Read [K in keyof T] as “for each key K of T”. The right-hand side is evaluated once per key, with K bound to that key, so T[K] is that property’s type. Add phone to Address and AddressForm grows a phone entry, with no edit.
Notice that postcode stayed optional. When a mapped type loops over keyof T directly, TypeScript treats it as homomorphic: it copies each property’s ? and readonly modifiers from T. That is usually what you want, and it is why the built-in utility types preserve optionality.
You do not have to loop over keyof. Any union of keys works, which is all Record is:
type MyRecord<K extends PropertyKey, V> = { [P in K]: V };\n\ntype CountsByStatus = MyRecord<'processing' | 'shipped' | 'delivered', number>;Put ? or readonly in front of the property to add it, and prefix with - to remove it. With those, most of the lib’s utility types are one line each:
type MyPartial<T> = { [K in keyof T]?: T[K] };\ntype MyReadonly<T> = { readonly [K in keyof T]: T[K] };\ntype MyRequired<T> = { [K in keyof T]-?: T[K] };\ntype Mutable<T> = { -readonly [K in keyof T]: T[K] };\ntype MyPick<T, K extends keyof T> = { [P in K]: T[P] };MyPartial<Address> is the PATCH body type. MyReadonly<Address> is the frozen copy for the review screen. -? does one more thing than you might expect: it also removes the undefined that an optional property implicitly carries, so MyRequired<Address>['postcode'] is string, not string | undefined.
MyPick is worth a second look. It maps over K, not keyof T, but because K is constrained to keyof T, TypeScript still treats it as homomorphic and keeps the modifiers of the picked properties.
Since TypeScript 4.1, a mapped type can rename each key with an as clause. The new name can be any type expression involving K, typically a template literal:
type Setters<T> = {\n [K in keyof T as `set${Capitalize<K & string>}`]: (value: T[K]) => void;\n};\n\ntype AddressSetters = Setters<Address>;\n// { setLine1: (value: string) => void; setCity: …; setCountry: …; setPostcode?: … }K & string is needed because keyof T may include number and symbol keys, and Capitalize only works on strings. You will see template literal types properly in Template Literal Types.
The as clause has a second power: a key mapped to never is dropped. That is exactly how Omit is defined:
type MyOmit<T, K extends PropertyKey> = { [P in keyof T as Exclude<P, K>]: T[P] };\n\ntype NewAddress = MyOmit<Address, 'postcode'>; // { line1; city; country }Exclude<P, K> gives never when P is one of the omitted keys and P otherwise. In the next lesson you will see how Exclude works, and how to filter keys by the type of their value rather than by name.
Types like FieldState pay off in the functions that use them. Here is the form’s update function, written once for any form, not just addresses:
function setField<T, K extends keyof T>(form: FieldState<T>, key: K, value: T[K]): FieldState<T> {\n return { ...form, [key]: { ...form[key], value, touched: true } };\n}\n\nsetField(addressForm, 'city', 'Dubai'); // ok\nsetField(addressForm, 'city', 42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.\nsetField(addressForm, 'cty', 'Dubai'); // Error: Argument of type '\"cty\"' is not assignable to parameter of type 'keyof Address'.This is the pluck pattern from section 2 combined with a mapped type. K is inferred from the key you pass, T[K] checks the value against that field’s type, and the mapped type guarantees the form has an entry for every field. When a deliveryNotes field is added to Address, the form type, the setters and this function all accept it immediately, and every place that builds a complete form is flagged until it handles the new field.
In the exercise you will re-implement four utility types and build the address form’s types from them. Next lesson adds the missing piece, conditionals, so your transformations can make decisions.
\n","toc":[{"id":"sec-1","text":"The loop","level":2},{"id":"sec-2","text":"Adding and removing modifiers","level":2},{"id":"sec-3","text":"Renaming keys with as","level":2},{"id":"sec-4","text":"Putting it to work","level":2}],"takeaways":["A mapped type{ [K in Keys]: … } loops over a union of keys and builds one property per key.","Mapping over keyof T is homomorphic, so optional and readonly modifiers are copied from T unless you add or remove them.","+?, -?, +readonly and -readonly add or strip modifiers; Required<T> is just { [K in keyof T]-?: T[K] }.","An as clause renames each key, and mapping a key to never removes it, which is how Omit works.","Built-in mapped types are shallow; nested objects keep their original modifiers."],"further":[{"title":"Mapped Types","url":"https://www.typescriptlang.org/docs/handbook/2/mapped-types.html"},{"title":"Utility Types","url":"https://www.typescriptlang.org/docs/handbook/utility-types.html"}],"quiz":[{"q":"What is Draft?
type Address = { readonly line1: string; city: string; postcode?: string };\ntype Draft = { -readonly [K in keyof Address]-?: Address[K] };{ line1: string; city: string; postcode: string }","why":"Correct. -readonly strips readonly from line1, -? makes postcode required, and the undefined that came with ? is removed too."},{"text":"{ readonly line1: string; city: string; postcode?: string }","why":"That is what you would get without the - modifiers; a homomorphic mapping copies them by default."},{"text":"{ line1: string; city: string; postcode: string | undefined }","why":"-? also removes the undefined that the optional modifier added, so postcode is plain string."},{"text":"It is an error, because -? is only allowed in Required.","why":"Required is an ordinary mapped type in the lib; the -? modifier works in any mapped type."}],"answer":0},{"q":"Which definition re-implements Omit<T, K>?
{ [P in keyof T]: P extends K ? never : T[P] }","why":"This keeps every key and sets the omitted ones to type never, so they are still required properties that nothing can satisfy."},{"text":"{ [P in K]: T[P] }","why":"That keeps only the listed keys, which is Pick, and it does not even compile without K extends keyof T."},{"text":"{ [P in keyof T as Exclude<P, K>]: T[P] }","why":"Correct. The as clause maps omitted keys to never, and a key remapped to never is dropped from the result."}],"answer":2},{"q":"type Setters<T> = { [K in keyof T as set${Capitalize]: (v: T[K]) => void } fails to compile. Why?
as clauses.","why":"They are allowed; renaming keys with template literals is the main use of as clauses."},{"text":"keyof T can include number and symbol keys, and Capitalize only accepts strings, so write Capitalize<K & string>.","why":"Correct. Intersecting with string keeps only string keys, which Capitalize can work with."},{"text":"T[K] is not allowed once the key has been renamed.","why":"Inside the mapped type, K is still the original key, so T[K] works as usual."}],"answer":1},{"q":"Readonly<Order> is applied to type Order = { id: number; lines: { sku: string }[] }. Which assignment is still allowed?
order.id = 1043","why":"id is a top-level property, and Readonly marks every top-level property as readonly."},{"text":"order.lines = []","why":"lines itself is a top-level property, so reassigning it is rejected."},{"text":"order.lines[0].sku = 'TENT-3P'","why":"Correct. Readonly is shallow; the array and its objects keep their original, mutable types."}],"answer":2}],"exercise":{"kind":"web","mode":"ts","starter":{"ts":"type Address = { line1: string; city: string; country: string; postcode?: string };\n\n// Re-implement these with mapped types (do not use the built-in utility types).\ntype MyPartialUsing mapped types only (no built-in Partial, Required, Pick, Omit or Record), implement:
MyPartial<T>, MyRequired<T>, MyPick<T, K> and MyOmit<T, K>, behaving like the built-ins.FieldState<T>: for every property, { value: T[K]; error: string | null; touched: boolean }.Setters<T>: for every property name, a property setName that is a function taking that property’s type and returning void.Then make initialState compile with its new return type.
{ [K in keyof T]: … }. Add ? after the key for optional, -? to remove optionality.","For MyOmit, rename keys with as and send the omitted ones to never: as Exclude<P, K>. Built-in Exclude is allowed.","For Setters, rename with a template literal: as `set${Capitalize<K & string>}` . In initialState, Object.fromEntries returns { [k: string]: … }, so cast its result once to FieldState<T>."],"explanation":"Each utility type is a loop over keys. Mapping over keyof T copies modifiers, so MyPartial adds ?, MyRequired removes it with -? (which also drops the implicit undefined), and MyPick keeps the original modifiers because K is constrained to keyof T. MyOmit works because a key remapped to never disappears. Setters shows the other use of as: renaming each key with a template literal, where K & string filters out number and symbol keys that Capitalize cannot handle. Object.fromEntries cannot know your keys, so one documented cast inside initialState gives callers a precise type.
initialState builds an untouched, error-free state for each field"}},"words":728,"readMinutes":3}