Indexed Access Types

Indexed access types extract property types using brackets, such as Person["name"]. Combined with number, they can extract the element type of an array. This avoids repeating property types in several places.

Reading the code: The first lookup takes the customer object and then its email property type. The second lookup indexes the array using number to get one item type. These lookups disappear after compilation.

Keep the boundary clear: Use type-level index syntax with known keys. Attempting Invoice["unknown"] fails even if JavaScript could try that property at runtime.

Save the code as indexed-access-types.ts. The result below was captured after compiling this exact example with strict TypeScript checking and executing the emitted JavaScript in Node.js.

TypeScript code

type Invoice = { id: number; customer: { email: string }; items: { cost: number }[] };
type Email = Invoice["customer"]["email"];
type Item = Invoice["items"][number];
const contact: Email = "ada@example.test";
const item: Item = { cost: 25 };
console.log(contact);
console.log(item.cost);

Verified output

ada@example.test
25

Build: npx tsc --strict --target es2022 --module commonjs --lib es2022,dom,esnext.disposable indexed-access-types.ts; run: node indexed-access-types.js. The exact filename may be changed freely. When a multi-file project exists, prefer its tsconfig.json and build scripts.

The first lookup takes the customer object and then its email property type. The second lookup indexes the array using number to get one item type. These lookups disappear after compilation.

The output shown above comes from the initialized values in this program. Replacing a type annotation alone does not transform a JavaScript value.

Use type-level index syntax with known keys. Attempting Invoice["unknown"] fails even if JavaScript could try that property at runtime.

Check both the TypeScript diagnostic and the emitted JavaScript behavior. A program can compile correctly and still need runtime validation or error handling.

Add quantity:number to each item. Use Invoice["items"][number]["quantity"] to declare a quantity variable.

Before running your change, write down the type you expect TypeScript to infer and the output you expect JavaScript to print. Then check both predictions.

Indexed access types extract property types using brackets, such as Person["name"].

Try the practice change and re-run the exact program to test your understanding.