Indexed access types

Ask a type for one of its parts

In JavaScript, you read a property of an object with its name in square brackets (the Object basics lesson covers this):

const tea = { name: "Tea", price: 3, inStock: true };
console.log(tea["price"]);

Line 1 makes a tea object with a name, a price, and whether it's in stock. Line 2 reads its price with tea["price"] and prints 3.

TypeScript lets you do the same with a type. Write a property name in square brackets after an object type, and you get the type of that property. This is called an indexed access type: the name in the brackets is the index, and looking it up is the access.

1type Product = { name: string; price: number; inStock: boolean };2 3type Price = Product["price"];4//   ^?5const teaPrice: Price = 3;6console.log(teaPrice);

Line 1 describes a Product: a name that is text, a price that is a number, and an inStock that is true or false (the Object types lesson covers this syntax). Line 3 makes a new type, Price, by looking up price in Product. The query on line 4 shows the answer: type Price = number. Line 5 uses Price like any other type, and line 6 prints 3.

The lookup happens only in the type, before the code runs. Try other names yourself: type inside the brackets on line 3 and watch the answer after the ^? on line 4 change as you type.

1type Product = { name: string; price: number; inStock: boolean };2 3type Looked = Product["price"];4//   ^?

"name" gives string and "inStock" gives boolean. A name the type doesn't have, like "colour", gets an error. So does price without quotes, because then it's the name of a type, not a property name. Empty brackets aren't a lookup at all: Product[] is a list of products. The last two tries, a union of names and keyof Product, are coming up in a later section.

Look up one property's type

A lookup can reach into a nested object, one pair of brackets at a time. Here is a user profile with an address inside it:

1type User = {2  id: number;3  name: string;4  address: { city: string; zip: string };5};6 7type Address = User["address"];8//   ^?9type City = User["address"]["city"];10//   ^?

Lines 1 to 5 describe a User. Line 4 says its address is an object with a city and a zip. Line 7 looks up address, and the query on line 8 shows the whole address type. Line 9 uses two pairs of brackets: User["address"] gives the address type, then ["city"] looks up city in it. The query on line 10 shows string.

In JavaScript you could also write tea.price with a dot. On a type, the dot is an error, on purpose here:

1type Product = { name: string; price: number; inStock: boolean };2 3type Price = Product.price;

Line 3 writes Product.price. TypeScript says Cannot access 'Product.price' because 'Product' is a type, but not a namespace. A namespace is a name that holds other names, which a dot can reach into. A type isn't one, so the dot can't reach into it. The message ends with the fix: Did you mean … with 'Product["price"]'?

The brackets take a type, not a value. So a variable that holds a name doesn't work there either:

1type Product = { name: string; price: number; inStock: boolean };2 3const key = "price";4type Price = Product[key];

Line 3 stores the text "price" in a variable called key. Line 4 puts key in the brackets, and TypeScript reports two errors on that line:

• Type 'key' cannot be used as an index type means "I can't look anything up with this".
• 'key' refers to a value, but is being used as a type here. Did you mean 'typeof key'? says why: key exists while the page runs, and types don't.

The message suggests the fix. In a type, typeof followed by a variable name gives that variable's type (the keyof & typeof lesson covers it):

1type Product = { name: string; price: number; inStock: boolean };2 3const key = "price";4type Price = Product[typeof key];5//   ^?

Line 3 is the same const key = "price". A const can never change, so TypeScript gives key the exact type "price", a type that allows only that one text (the Literal types lesson covers this). Line 4 uses typeof key, which is that type, so the lookup works. The query on line 5 shows number.

Why look a type up instead of writing number? Because a lookup isn't a copy. It always means "whatever price is now". Here setPrice types its price parameter with Product["price"]. Press the buttons to change the price type on line 1, and watch the query on line 4:

1type Product = { name: string; price: number; inStock: boolean };2 3function setPrice(product: Product, price: Product["price"]) {4  //                                ^?5  return { ...product, price };6}7 8const tea: Product = { name: "Tea", price: 3, inStock: true };9console.log(setPrice(tea, 4).price);

Line 3 never changes, yet the parameter follows line 1 every time. With price: string, lines 8 and 9 get errors, because they still pass numbers: TypeScript has found the two places you must update. With price: number | null, the parameter accepts null too. If line 3 said price: number, you would have to remember to change it by hand.

Look up several properties at once

Inside the brackets you can put more than one name, joined with |. That makes a union of names, "this one or that one" (the Union types lesson covers unions). TypeScript looks up each name and joins the answers:

1type Product = { name: string; price: number; inStock: boolean };2 3type NameOrPrice = Product["name" | "price"];4//   ^?5type AnyValue = Product[keyof Product];6//   ^?

Line 3 looks up "name" | "price". The query on line 4 shows string | number: the type of either one. Line 5 uses keyof Product. As in the keyof & typeof lesson, keyof before an object type gives the union of all its property names, here "name" | "price" | "inStock". So Product[keyof Product] is the type of any one of its properties, and the query on line 6 shows string | number | boolean.

That "any property" type is useful, but it can be too loose. Here is a function that saves one setting on a settings page. Its value parameter is the type of any setting:

1type Settings = { theme: "light" | "dark"; fontSize: number; showTips: boolean };2 3function updateSetting(key: keyof Settings, value: Settings[keyof Settings]) {4  console.log(`Saving ${key} = ${value}`);5}6 7updateSetting("fontSize", "dark");

Line 1 describes the settings. theme is "light" | "dark", which allows only those two texts. Line 3 says key is any setting name and value is Settings[keyof Settings], which is number | boolean | "light" | "dark". Line 4 prints what it saves. Line 7 saves the text "dark" as the font size. There are no errors, and it prints Saving fontSize = dark. The value type doesn't know which key you passed.

The fix is to make the key a type parameter, a name for a type that is filled in at each call (the Generic constraints lesson covers K extends keyof T). Then look up Settings[K]: the type of the one key that was passed. Press the buttons to try different calls on line 7:

1type Settings = { theme: "light" | "dark"; fontSize: number; showTips: boolean };2 3function updateSetting<K extends keyof Settings>(key: K, value: Settings[K]) {4  console.log(`Saving ${key} = ${value}`);5}6 7updateSetting("fontSize", 18);

Line 3 now says K extends keyof Settings: K must be one of the setting names, and it is the exact name you pass. value: Settings[K] looks that name up. So with "fontSize", the value must be a number, and with "theme", it must be "light" or "dark". The two wrong calls still print when they run, but TypeScript marks them first.

The type of an array's items

An array type like string[] means "a list of strings" (the Arrays & tuples lesson covers them). To get the type of one item, look it up with number in the brackets:

1type Cart = { name: string; price: number }[];2 3type CartItem = Cart[number];4//   ^?5const cake: CartItem = { name: "Cake", price: 4 };6console.log(cake.name);

Line 1 says a Cart is a list of objects, each with a name and a price. Line 3 looks up Cart[number]. Array items sit at number positions, 0, 1, 2, and so on, so [number] means "the item at any number position". The query on line 4 shows the item type. Line 5 uses it for cake, and line 6 prints Cake.

Cart[0] gives the same type. An array type doesn't know how many items the list will hold, so every position has the same type. [number] is the usual way to write it, because it says "any item".

A tuple is different: it has a fixed length and its own type at each position. So the position you look up matters, and one past the end is an error, on purpose here:

1type CartLine = [string, number];2 3type Name = CartLine[0];4//   ^?5type Either = CartLine[number];6//   ^?7type Third = CartLine[2];

Line 1 says a CartLine is a name and then a quantity, like ["Tea", 2]. Line 3 looks up position 0, and the query on line 4 shows string. Line 5 looks up number, any position, and the query on line 6 shows string | number. Line 7 asks for position 2. TypeScript says Tuple type 'CartLine' of length '2' has no element at index '2': the positions are only 0 and 1.

The table below sums up what can go inside the brackets. Read each row as: what you put in, an example, and what you get.

Types read from your data

So far the types came first. Often the data comes first: the sizes in a dropdown, or a page's default settings. Then you can read the type from the data, so the two can never disagree:

1const sizes = ["S", "M", "L"] as const;2 3type Size = (typeof sizes)[number];4//   ^?5function pickSize(size: Size) {6  console.log(`You picked ${size}`);7}8pickSize("M");

Line 1 is a list of sizes for a dropdown. as const after it tells TypeScript the list will never change, so it keeps the exact texts "S", "M", and "L" instead of "any string" (the as const & satisfies lesson covers it).

Line 3 does two steps. typeof sizes gives the type of the value sizes. Then [number] takes the type of any one item. The round brackets around typeof sizes aren't required, but they make it clear which step comes first. The query on line 4 shows "S" | "M" | "L". Lines 5 to 7 make a function that takes only a Size, and line 8 prints You picked M.

The list is now the only place the sizes are written. Change it with the buttons, and watch line 8, which asks for an XL:

1const sizes = ["S", "M", "L"] as const;2 3type Size = (typeof sizes)[number];4//   ^?5function pickSize(size: Size) {6  console.log(`You picked ${size}`);7}8pickSize("XL");

Adding "XL" to line 1 is the only change, and the error on line 8 disappears, because Size now includes it. Taking sizes away makes calls to missing sizes errors again. You never edit a type by hand.

The same works for objects. Here a page's default settings give you the Settings type:

1const defaultSettings = { theme: "light", fontSize: 16, showTips: true };2 3type Settings = typeof defaultSettings;4//   ^?5type FontSize = Settings["fontSize"];6//   ^?

Line 1 is an object with the default settings. Line 3 makes Settings its type, and the query on line 4 shows it. Line 5 looks up fontSize in it, and the query on line 6 shows number. Notice that theme is string, not "light": an object's properties can change, so TypeScript keeps the general type unless you add as const.

Types for a todo list from one reply type

A todo app gets one reply from its server: the user and their todos. Describe the reply once, and look up every smaller type from it:

1type TodosReply = {2  user: { id: number; name: string };3  todos: { id: number; title: string; done: boolean }[];4};5 6type Todo = TodosReply["todos"][number];7type TodoId = Todo["id"];8 9function findTodo(reply: TodosReply, id: TodoId) {10  return reply.todos.find((todo) => todo.id === id);11}12 13const reply: TodosReply = {14  user: { id: 7, name: "Asha" },15  todos: [16    { id: 1, title: "Buy tea", done: false },17    { id: 2, title: "Bake cake", done: true },18  ],19};20console.log(findTodo(reply, 2)?.title);

Lines 1 to 4 describe what the server sends: a user, and todos, a list of objects. Line 6 makes Todo in two steps: TodosReply["todos"] is the list, and [number] is one item of it. Line 7 makes TodoId the type of a todo's id, which is number. Lines 9 to 11 look up a todo by its id with find (the Searching arrays lesson covers it). Lines 13 to 19 are a sample reply, and line 20 prints Bake cake.

Now say the server starts sending ids as text. You change id: number on line 3, and nothing else. Todo and TodoId follow, and TypeScript marks every place that still uses a number id. That's why teams describe each server reply once and look up the rest.

Common mix-ups

A type read from data is only as exact as the data's type. Here is the size list again, without as const:

1const sizes = ["S", "M", "L"];2 3type Size = (typeof sizes)[number];4//   ^?5function pickSize(size: Size) {6  console.log(`You picked ${size}`);7}8pickSize("XXXL");

Line 1 has no as const, so TypeScript types the list as string[]: a list of any texts, because you might add more later. The query on line 4 shows type Size = string. Line 8 asks for a size that doesn't exist, and TypeScript has nothing to say. It prints You picked XXXL.

• "Product.price works on a type, like in JavaScript." No. A type is looked up with brackets: Product["price"]. The dot is an error.
• "I can put a variable in the brackets." No. The brackets take a type. For a const, write typeof key to use its type.
• "Product["price"] is a copy of the type." No. It follows Product. Change price, and every lookup of it changes too.
• "Product["name" | "price"] gives an object with those two properties." No. It gives their types, joined: string | number.
• "Cart[number] means the item at a position called number." No. It means any number position, so it gives the type of one item.
• "(typeof sizes)[number] always gives the exact values." No. Only when the list has as const. Without it, the answer is string.
• "A lookup reads the object while the page runs." No. It's a type, so it's checked and then removed before the code runs, like every type.

The table below sets the brackets on a value beside the brackets on a type. Read each row as: what you write, what it is, and what you get.

Practice exercises

Each exercise is TypeScript. Press Edit & run on the starter code: the errors and ^? answers update as you type. Try a guess first, then use the hints.

1type Order = { id: number; status: "paid" | "sent"; total: number };2 3type Status = Order["status"];

1type Order = { id: number; status: "paid" | "sent"; total: number };2 3type Status = Order["status"];4//   ^?

type User = { id: number; name: string; email: string };

type UserId = User["id"];
type UserName = User.name;
type UserEmail = User["email"];

1type User = { id: number; name: string; email: string };2 3type UserId = User["id"];4type UserName = User["name"];5type UserEmail = User["email"];

1type Playlist = { title: string; seconds: number }[];2 3type Song = unknown; // replace unknown4 5const song: Song = { title: "Rain", seconds: 200 };6console.log(song.title);

1type Playlist = { title: string; seconds: number }[];2 3type Song = Playlist[number];4 5const song: Song = { title: "Rain", seconds: 200 };6console.log(song.title);

1type Product = { name: string; price: number; currency: "USD" | "EUR" };2 3function formatPrice(price: number, currency: string) {4  return `${price} ${currency}`;5}6 7console.log(formatPrice(3, "INR"));

1type Product = { name: string; price: number; currency: "USD" | "EUR" };2 3function formatPrice(price: Product["price"], currency: Product["currency"]) {4  return `${price} ${currency}`;5}6 7console.log(formatPrice(3, "INR"));

1const roles = ["viewer", "editor", "admin"];2 3type Role = (typeof roles)[number];4//   ^?5function setRole(role: Role) {6  console.log(`Role set to ${role}`);7}8setRole("owner");

1const roles = ["viewer", "editor", "admin"] as const;2 3type Role = (typeof roles)[number];4//   ^?5function setRole(role: Role) {6  console.log(`Role set to ${role}`);7}8setRole("owner");

1type Settings = { theme: "light" | "dark"; fontSize: number; showTips: boolean };2 3function updateSetting(key: keyof Settings, value: Settings[keyof Settings]) {4  console.log(`Saving ${key} = ${value}`);5}6 7updateSetting("fontSize", true);

1type Settings = { theme: "light" | "dark"; fontSize: number; showTips: boolean };2 3function updateSetting<K extends keyof Settings>(key: K, value: Settings[K]) {4  console.log(`Saving ${key} = ${value}`);5}6 7updateSetting("fontSize", true);

Check your understanding

For each question, ask: which type is being looked up, and what is inside the brackets? The quiz shows its code without the checker, so the error list doesn't give the answers away.

Key takeaways

• Type["key"] looks up the type of one property, like Product["price"] is number. Chain brackets to reach into nested objects.
• Types are looked up with brackets, never a dot, and the brackets take a type, so a variable needs typeof.
• A union of keys gives a union of types. Type[keyof Type] is the type of any property.
• With a type parameter, Settings[K] is the type of the exact key passed, which keeps a key and its value matched.
• Array[number] is the type of one item. A tuple looks up each position on its own.
• (typeof list)[number] reads a type from your data. Add as const to keep the exact values.
• A lookup isn't a copy: it follows the type it reads from, so one change updates every lookup.

Coming next: Conditional types. They let a type choose between two answers, like "if this is an array, give its item type".