Partial, Pick, Omit & friends

New object types from the one you have

A settings page lets a user change their name, email, or age. When they press Save, the page sends only what changed, like a new email. The whole profile has a type already. You need a second type for the change, where every property may be left out. Instead of writing it again by hand, you can make it from the first one:

1type Profile = { name: string; email: string; age: number };2type ProfileChange = Partial<Profile>;3//   ^?4 5const wholeProfile: Profile = { email: "asha@shop.example" };6const change: ProfileChange = { email: "asha@shop.example" };7console.log(change);

Line 1 describes a whole Profile, using an object type. Line 2 makes a new type from it: Partial<Profile>. You write the helper's name, then the type you start from in angle brackets. The query on line 3 shows what Partial made: the same three properties, each with a ? after its name. A ? makes a property optional: an object may leave it out. Each type also gained | undefined, because a property you read may not be there.

Line 5 stores a change with only an email as a whole Profile, and TypeScript marks it on purpose: Type '{ email: string; }' is missing the following properties from type 'Profile': name, age. It means a Profile needs a name and an age, and this object has neither. Line 6 stores the same object as a ProfileChange, where every property is optional, so it fits. Line 7 prints { email: 'asha@shop.example' }.

Partial is one of TypeScript's utility types: helpers, built into TypeScript, that make a new type from one you already have. This lesson covers the six you'll use most for objects. Each one leaves the type you give it as it is. And when you add a property to Profile, every type made from it gets that property too.

You could already write Partial yourself. It is the mapped type { [Key in keyof T]?: T[Key] }, which goes through every key of T and adds a ?. TypeScript builds it in, with a name, so you don't write it again in every project. The other helpers in this lesson are built from mapped types too.

Partial and Required

Required does the opposite of Partial: it takes away every ?. A settings form may leave some settings out, but once the page has saved them, every setting has a value:

1type Settings = { theme?: "light" | "dark"; fontSize?: number };2type SavedSettings = Required<Settings>;3//   ^?4 5const fromForm: Settings = { theme: "dark" };6const saved: SavedSettings = { theme: "dark" };

Line 1 says a theme and a font size are both optional. Line 2 makes SavedSettings with Required, and the query on line 3 shows both properties without their ?, and without | undefined. Line 5 is fine: a form may leave the font size out. Line 6 isn't, so TypeScript marks it on purpose: Property 'fontSize' is missing in type '{ theme: "dark"; }' but required in type 'Required<Settings>'.

The usual way to get every setting is to start from defaults, then put the user's choices over them:

1type Settings = { theme?: "light" | "dark"; fontSize?: number };2 3const defaults: Required<Settings> = { theme: "light", fontSize: 16 };4const fromForm: Settings = { theme: "dark" };5 6const saved: Required<Settings> = { ...defaults, ...fromForm };7console.log(saved);

Line 3 gives every setting a default, so it fits Required<Settings>. Line 4 is what the form sent: only a theme. Line 6 builds the saved settings with the spread syntax: first every default, then the form's choices, which replace the defaults they share a name with. TypeScript works out that every setting now has a value, so the result fits Required<Settings>. Line 7 prints { theme: 'dark', fontSize: 16 }.

The table below compares the two. Read each row as a question, then the answer for each helper.

Pick and Omit

A shop's product has an id, a name, a price, and a description. A small product card shows only the name and the price. A form for a new product has everything except the id, because the server gives each product its id. Pick and Omit make those two types:

1type Product = { id: number; name: string; price: number; description: string };2 3type ProductCard = Pick<Product, "name" | "price">;4//   ^?5type NewProduct = Omit<Product, "id">;6//   ^?7 8const card: ProductCard = { name: "Tea", price: 3 };9console.log(`${card.name}: $${card.price}`);

Line 3 uses Pick with two things in the angle brackets: the type, and the names to keep, written as a union like "name" | "price". The query on line 4 shows a type with only those two properties. Line 5 uses Omit, which keeps every property except the names you list, so the query on line 6 shows name, price, and description. Each property keeps its type from Product. Line 8 makes a card, and line 9 prints Tea: $3.

Now type the names yourself. Change line 3 and watch the answer after the query on line 4:

1type Product = { id: number; name: string; price: number; description: string };2 3type ProductCard = Pick<Product, "name" | "price">;4//   ^?

Any names Product has are fine, and keyof Product, which means "every property name of Product", gives you a full copy. "colour" gets an error, because Pick only takes names the type really has. Omit is different:

1type Product = { id: number; name: string; price: number; description: string };2 3type CardByPick = Pick<Product, "name" | "colour">;4type CardByOmit = Omit<Product, "colour">;5//   ^?

Line 3 asks Pick for "colour", and TypeScript marks it on purpose: Type '"name" | "colour"' does not satisfy the constraint 'keyof Product'. In plain words: one of those names isn't a property of Product. Line 4 asks Omit to take out "colour", and there's no error. Omit accepts any name, so a typo goes unnoticed. The query on line 5 shows that nothing was taken out: all four properties are still there.

The table below compares the two. Read each row as a question, then the answer for each helper.

Readonly and Record

Readonly marks every property readonly, so your code can read it but not assign a new value to it. A todo item on a page that only shows the list might be read-only:

1type Todo = { title: string; done: boolean };2 3const todo: Readonly<Todo> = { title: "Buy tea", done: false };4todo.done = true;5console.log(todo.done);

Line 3 makes a Readonly<Todo>. Line 4 tries to change done, and TypeScript marks it on purpose: Cannot assign to 'done' because it is a read-only property. But Readonly is only a type. Run the code anyway and line 5 prints true: the change happens, because the types are gone when the code runs. To stop changes while the page runs, use Object.freeze. TypeScript gives what it returns a Readonly type.

Record makes an object type from a list of keys and one value type. You may have met Record<string, number> in the Index signatures lesson. With a union of keys, it needs a property for every one. A Save button shows a different label for each status:

1type Status = "idle" | "saving" | "saved";2type ButtonLabels = Record<Status, string>;3//   ^?4 5const labels: ButtonLabels = {6  idle: "Save",7  saving: "Saving…",8};9console.log(labels.saving);

Line 1 lists three statuses. Line 2 makes ButtonLabels: one property for each status, each holding a string, as the query on line 3 shows. Lines 5 to 8 give labels for idle and saving, but forget saved, so TypeScript marks line 5 on purpose: Property 'saved' is missing. That's the point of Record: add a fourth status later, and TypeScript points at every object that needs a label for it. Line 9 still prints Saving….

With string as the keys, any name is allowed, which suits a lookup like prices. It also means TypeScript can't know which keys are there:

1const prices: Record<string, number> = { tea: 3, cake: 4 };2 3console.log(prices.tea);4const coffee = prices.coffee;5//    ^?6console.log(coffee);

Line 1 stores two prices. Line 3 prints 3. Line 4 reads coffee, which isn't there. The query on line 5 says const coffee: number, but line 6 prints undefined. With string keys, check that a key exists before you use its value.

Which helper fits?

Here is a draft product with only a name. Put a different helper on line 2, and watch which ones accept the draft on line 4:

1type Product = { id: number; name: string; price: number };2type Draft = Partial<Product>;3//   ^?4const draft: Draft = { name: "Tea" };5console.log(draft);

Partial and Pick name accept it. Required and Readonly don't make anything optional, so they still need an id and a price. Omit id takes away the id, but the price is still required.

The table below lists all six helpers. Read each row as: this helper, the type it makes, and where you'd use it.

Typing a form update

Back to the profile form. The page sends a change, and a function puts it over the saved profile. The change may hold any property except id, which no form should touch. Helpers combine, so you can say exactly that:

1type Profile = { id: number; name: string; email: string };2type ProfileChange = Partial<Omit<Profile, "id">>;3 4function updateProfile(profile: Profile, changes: ProfileChange): Profile {5  return { ...profile, ...changes };6}7 8const asha: Profile = { id: 7, name: "Asha", email: "asha@example.com" };9const updated = updateProfile(asha, { email: "asha@shop.example" });10console.log(updated);

Line 2 reads from the inside out: Omit<Profile, "id"> takes away the id, then Partial makes what's left optional. Lines 4 to 6 make updateProfile. Line 5 spreads the old profile first and the change over it, so changed properties replace the old ones and the rest stay. Line 9 sends a new email, and line 10 prints { id: 7, name: 'Asha', email: 'asha@shop.example' }.

Now try what a form might really send:

1type Profile = { id: number; name: string; email: string };2type ProfileChange = Partial<Omit<Profile, "id">>;3 4function updateProfile(profile: Profile, changes: ProfileChange): Profile {5  return { ...profile, ...changes };6}7 8const asha: Profile = { id: 7, name: "Asha", email: "asha@example.com" };9const updated = updateProfile(asha, { email: "asha@shop.example" });10console.log(updated);

The first three changes have no errors. A typo gets Did you mean to write 'email'?: without TypeScript, the profile would get an extra emial property, and the email wouldn't change. Change the id is caught because of the Omit, and A number for the name because an optional name must still be a string when it's there.

Forms also show error messages, one at most for each field. Partial over a Record types them:

1type Field = "name" | "email";2type FormErrors = Partial<Record<Field, string>>;3//   ^?4 5const errors: FormErrors = {};6errors.email = "Enter an email address";7console.log(errors);

Line 2 makes a Record with a message for each field, then makes each message optional, as the query on line 3 shows. Line 5 starts with no errors, line 6 adds one for the email, and line 7 prints { email: 'Enter an email address' }.

Common mix-ups

Readonly covers only the object's own properties. A list inside it can still change:

1type Cart = { owner: string; items: string[] };2 3const cart: Readonly<Cart> = { owner: "Asha", items: ["Tea"] };4cart.items.push("Cake");5console.log(cart.items);

Line 3 makes a read-only cart. Line 4 adds a cake to its list with push, and there's no error: push doesn't assign a new list to cart.items, it changes the list that's already there. Line 5 prints [ 'Tea', 'Cake' ]. To protect the list too, give items the type readonly string[].

Partial has a surprise of its own. By default, an optional property may be left out or hold undefined:

1type Profile = { name: string; email: string };2 3function updateProfile(profile: Profile, changes: Partial<Profile>): Profile {4  return { ...profile, ...changes };5}6 7const asha: Profile = { name: "Asha", email: "asha@example.com" };8const updated = updateProfile(asha, { name: undefined });9console.log(updated.name);

Line 8 sends { name: undefined }, and TypeScript allows it. The spread on line 4 copies it, so line 9 prints undefined, even though the return type says the name is a string. The compiler option exactOptionalPropertyTypes makes a ? mean only "may be left out". Here is the same code with it turned on:

1type Profile = { name: string; email: string };2 3function updateProfile(profile: Profile, changes: Partial<Profile>): Profile {4  return { ...profile, ...changes };5}6 7const asha: Profile = { name: "Asha", email: "asha@example.com" };8const updated = updateProfile(asha, { name: undefined });9console.log(updated.name);

Now line 8 gets an error on purpose: Argument of type '{ name: undefined; }' is not assignable to parameter of type 'Partial<Profile>' with 'exactOptionalPropertyTypes: true'. A change may leave the name out, but it may not set it to undefined.

The table below lists things the helpers don't stop. Read each row as: this code, whether TypeScript stops it, and what happens when it runs.

• "Partial<Profile> changes the Profile type." No. It makes a new type. Profile stays exactly as it was.
• "Readonly freezes the object." No. It's only a type, so the object can still change when the code runs. Object.freeze is what stops changes while the page runs.
• "Readonly protects everything inside." No. It covers the object's own properties. A list or object inside can still change.
• "Omit warns me about a wrong name." No. Omit accepts any name. Pick is the one that checks.
• "An optional property can only be left out." No. By default it may also hold undefined, unless exactOptionalPropertyTypes is on.
• "Partial makes nested objects optional too." No. It changes only the top level. An address that is there must still be a whole address.

Practice exercises

Each exercise is TypeScript. To change the starter code, press Edit & run: the errors update as you type, and a // ^? line under a type shows what a helper made. Try a guess first, then use the hints.

1type Settings = { theme: string; fontSize: number };2type SettingsChange = Partial<Settings>;

1type Settings = { theme: string; fontSize: number };2type SettingsChange = Partial<Settings>;3//   ^?4const noChange: SettingsChange = {};

type Order = { id: number; status: string };

const order: Readonly<Order> = { id: 7, status: "paid" };
console.log(order.status);
order.status = "shipped";

1type Order = { id: number; status: string };2 3const order: Readonly<Order> = { id: 7, status: "paid" };4console.log(order.status);5const shipped: Readonly<Order> = { ...order, status: "shipped" };6console.log(shipped.status);

1type Product = { id: number; name: string; price: number; description: string };2 3type ProductCard = Product;4 5const card: ProductCard = { name: "Tea", price: 3 };6console.log(`${card.name}: $${card.price}`);

1type Product = { id: number; name: string; price: number; description: string };2 3type ProductCard = Pick<Product, "name" | "price">;4 5const card: ProductCard = { name: "Tea", price: 3 };6console.log(`${card.name}: $${card.price}`);

1type Status = "draft" | "published" | "archived";2 3const badges: Record<Status, string> = {4  draft: "Draft",5  published: "Live",6};7console.log(badges.published);

1type Status = "draft" | "published" | "archived";2 3const badges: Record<Status, string> = {4  draft: "Draft",5  published: "Live",6  archived: "Archived",7};8console.log(badges.published);

1type Profile = { id: number; name: string; email: string };2type ProfileChange = Partial<Profile>;3 4function updateProfile(profile: Profile, changes: ProfileChange): Profile {5  return { ...profile, ...changes };6}7 8const asha: Profile = { id: 7, name: "Asha", email: "asha@example.com" };9console.log(updateProfile(asha, { id: 8 }));

1type Profile = { id: number; name: string; email: string };2type ProfileChange = Partial<Omit<Profile, "id">>;3 4function updateProfile(profile: Profile, changes: ProfileChange): Profile {5  return { ...profile, ...changes };6}7 8const asha: Profile = { id: 7, name: "Asha", email: "asha@example.com" };9console.log(updateProfile(asha, { id: 8 }));

1type Settings = { theme?: "light" | "dark"; fontSize?: number };2 3function applySettings(fromForm: Settings) {4  const saved = { theme: "light", ...fromForm };5  const size: number = saved.fontSize;6  console.log(saved.theme, size);7}8 9applySettings({ theme: "dark" });

1type Settings = { theme?: "light" | "dark"; fontSize?: number };2 3const defaults: Required<Settings> = { theme: "light", fontSize: 16 };4 5function applySettings(fromForm: Settings) {6  const saved = { ...defaults, ...fromForm };7  const size: number = saved.fontSize;8  console.log(saved.theme, size);9}10 11applySettings({ theme: "dark" });

Check your understanding

For each question, write out the type the helper makes before you choose. The quiz shows its code without the checker, so the error list doesn't give the answers away.

Key takeaways

• A utility type makes a new type from one you have, like Partial<Profile>. The original doesn't change.
• Partial makes every property optional, for changes and drafts. Required makes every property required.
• Pick keeps the properties you list, and checks the names. Omit keeps the rest, and doesn't check.
• Readonly stops assignments in your code, but nothing while the page runs, and only at the top level.
• Record<Keys, Type> needs a property for every key. With string keys, any key may be missing.
• Helpers combine: Partial<Omit<Profile, "id">> is a form update that can't touch the id.

Coming next: ReturnType, Awaited & more. It covers the built-in helpers for unions and functions, like Exclude, ReturnType, and Awaited.