🧠 TypeScript — Indexed Access Types: Complete Guide with Examples

🧲 Introduction – Why Use Indexed Access Types?

In TypeScript, Indexed Access Types allow you to reference the type of a specific property from another type. This powerful mechanism promotes type reusability, accuracy, and type safety—especially useful when working with complex objects, generics, or deeply nested types.

🎯 What You’ll Learn:

• What indexed access types are
• How to use them with keys, unions, arrays, and generics
• Detailed explanations for every code snippet
• Real-world usage patterns

📘 What Are Indexed Access Types?

Indexed Access Types let you dynamically reference a type of a property using its key:

type PropertyType = TypeName[Key];

• TypeName: any object type (e.g., interface, type alias)
• Key: the name of a property in the object type

🧪 Example 1: Extracting a Property Type

type User = {
  name: string;
  age: number;
};

type NameType = User["name"]; // string
type AgeType = User["age"];   // number

🔍 Explanation:

• User is a type with two properties: name (string) and age (number).
• User["name"] accesses the type of the name property — which is string.
• User["age"] accesses the type of the age property — which is number.

You don’t need to repeat the structure manually. This ensures automatic consistency with the User type.

🔁 Example 2: Using keyof with Indexed Access Types

type UserKeys = keyof User;         // "name" | "age"
type ValueTypes = User[UserKeys];   // string | number

🔍 Explanation:

• keyof User returns a union of all keys: "name" | "age".
• User[UserKeys] means we’re accessing both User["name"] and User["age"] — resulting in a union of their types: string | number.

This is how you extract all value types from an object type dynamically.

🔗 Example 3: Indexing with Union of Keys

type Person = {
  id: number;
  name: string;
  active: boolean;
};

type IdOrStatus = Person["id" | "active"]; // number | boolean

🔍 Explanation:

• You’re accessing two properties at once: id (number) and active (boolean).
• The result is a union: number | boolean.

✅ This pattern is useful when extracting specific subsets of property types.

🔄 Example 4: Indexed Access with Arrays

type Roles = ["admin", "user", "guest"];
type Role = Roles[number]; // "admin" | "user" | "guest"

🔍 Explanation:

• Roles is a tuple (fixed-length array) with three string literals.
• Using Roles[number] means we’re asking: “What is the type of any element in Roles?”
• Since it’s a union of all possible index values (0, 1, 2), the result is "admin" | "user" | "guest".

📌 This is commonly used for defining value enums or dropdown options.

🧰 Example 5: Type-Safe Property Accessor Function

function getValue<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const product = { id: 101, name: "Notebook", price: 500 };
const id = getValue(product, "id");     // number
const name = getValue(product, "name"); // string

🔍 Explanation:

• T is a generic type representing any object.
• K extends keyof T ensures that key must be a valid property of T.
• T[K] dynamically returns the type of that property.

This prevents typos and incorrect property access during development.

🔍 Example 6: Nested Indexed Access Types

type Profile = {
  user: {
    name: string;
    contact: {
      email: string;
      phone: string;
    };
  };
};

type ContactType = Profile["user"]["contact"]; // { email: string; phone: string }
type EmailType = Profile["user"]["contact"]["email"]; // string

🔍 Explanation:

• You’re chaining property access to go deep inside nested objects.
• Profile["user"] gives you the type of the user object.
• Adding another layer: ["contact"], and then ["email"] gives the final string type.

✅ This is particularly useful when working with API response types or configuration schemas.

🧪 Example 7: With Mapped Types & keyof

type Car = {
  brand: string;
  year: number;
};

type CarProperties = {
  [K in keyof Car]: Car[K];
};

🔍 Explanation:

• This is a mapped type.
• For each key in Car, we get its type via Car[K] using indexed access.
• The result is effectively the same as the original Car type.

📌 This pattern is how many built-in utility types (like Pick, Record, Partial) work.

✅ Best Practices for Indexed Access Types

• 💡 Use with generics: Great for reusable functions.
• 🔁 Avoid repetition: DRY your types by referencing them instead of rewriting.
• 🛡️ Type safety: Reduces runtime errors from invalid property access.

📌 Summary – Recap & Use Cases

Indexed access types are a foundational feature of TypeScript that allows developers to look up property types dynamically. Whether you’re working with generics, APIs, or arrays, this approach ensures better scalability and type integrity.

🔍 Key Takeaways:

• Use Type["key"] to extract the type of a property
• Combine with keyof to iterate through keys
• Supports deep indexing and union keys
• Widely used in utility types, schema validation, and component props

⚙️ Real-World Scenarios:

• Extracting data from deeply nested API responses
• Validating form fields based on object structure
• Creating reusable, safe dynamic functions

❓ FAQs

❓ What is the difference between typeof and indexed access types?

❓ Can indexed access types work with tuples and arrays?

✅ Yes! Use numeric keys:

type MyTuple = [string, number];
type First = MyTuple[0]; // string
type Second = MyTuple[1]; // number

❓ Do utility types in TypeScript use indexed access?

✅ Absolutely! Built-in types like Pick<T, K> and Record<K, T> heavily rely on this feature under the hood.

❓ Is it safe to use nested indexed types?

✅ Yes, and it’s encouraged for API-heavy or config-heavy applications. Just ensure the path exists, or combine with optional chaining types (?. for runtime, Partial for types).