Indexed Access Types

Extracting types from specific object properties.

TypeScript4 min readConcept 27 of 54

Object property lookup, but for types

In JavaScript, you access an object's property using bracket notation: user['address'].

In TypeScript, you can use the exact same bracket notation to look up a *type* on another type. This is called an Indexed Access Type.

Don't Repeat Yourself (DRY)

Imagine an API returns a massive Product type, but your UI component only needs the deeply nested reviews array. You shouldn't manually recreate the Review type from scratch.

Instead, you dynamically extract it: type ReviewList = Product['reviews']. If the backend changes the API, your extracted type updates automatically!

Syntax

typescript type User = { id: number; name: string; address: { street: string; city: string; }; }; // 1. Single extraction type ID = User["id"]; // number // 2. Nested extraction type City = User["address"]["city"]; // string // 3. Union extraction (Extracting multiple properties) type IdOrName = User["id" | "name"]; // number | string

Try it

Select different property paths to see how the TypeScript compiler reaches deep into the User object and extracts the exact underlying type.

type User = {
id: number;
role: "admin" | "user";
address: {
city: string;
zip: number;
};
};
Extraction Engine
type Result = User["id"];

Extracted Type

number

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Given `type Settings = { theme: 'dark' | 'light', notifications: boolean }`, what does `type T = Settings['theme' | 'notifications']` resolve to?

Remember this

  • Use bracket notation Type['key'] to extract a specific property's type.
  • You can chain brackets for deep extraction: Type['a']['b'].
  • You can pass a union of keys Type['a' | 'b'] to get a union of the resulting types.
  • You must pass a *type* into the brackets, not a runtime variable.

Done with this concept?

Mark it complete to track your progress. No login needed.