Suggest an edit

Improve this article

Refine the answer for “Index Access Types”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What an Index Access Type Is

**The idea is simple:**

> If we have an object type `T`, we can access its property by key `K` and get the type of that property.

Syntax:

```javascript
T[K]
```

where

- `T` is the object type,
- `K` is the name (or union of names) of the keys of `T`.

---

### Example 1. Simple access

```javascript
type User = {
  id: number;
  name: string;
  isAdmin: boolean;
};

type IdType = User["id"];       // number
type NameType = User["name"];   // string
type Flags = User["isAdmin"];   // boolean
```

Just like accessing an object's property in JS (`user["id"]`),
in TS we get the **type** of that property, `number`.

---

## You can take several keys at once

```javascript
type User = {
  id: number;
  name: string;
  isAdmin: boolean;
};

type StringFields = User["name" | "isAdmin"];
// string | boolean
```

TypeScript creates a **union of the property types**.

---

## Using it with `keyof`

`keyof` (which returns a union of property names) is often used together with it:

```javascript
type User = {
  id: number;
  name: string;
  age: number;
};

type ValueOfUser = User[keyof User];
// number | string
```

> This is the equivalent of "all possible value types of the object".

---

## Example 2. Nested properties

You can access nested types:

```javascript
type Post = {
  author: {
    name: string;
    age: number;
  };
  content: string;
};

type Author = Post["author"];           // { name: string; age: number }
type AuthorName = Post["author"]["name"]; // string
```

TypeScript computes the type recursively.

---

## Example 3. Dynamic usage with a generic

```javascript
type PropType<T, K extends keyof T> = T[K];

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

type IdType = PropType<User, "id">;   // number
type NameType = PropType<User, "name">; // string
```

> Here `PropType<T, K>` is a generic "getter" for a property's type.
> It is often used in libraries (for example, React, Redux, Prisma, and so on).

---

## Example 4. Working with arrays and tuples

An index access type can also be used for arrays:

```javascript
type Numbers = number[];

type Element = Numbers[number];
// number
```

This is the standard trick for "pulling out" the type of an array element.

A more concrete example:

```javascript
const users = [
  { id: 1, name: "Tom" },
  { id: 2, name: "Bob" },
];

type User = (typeof users)[number];
// { id: number; name: string }
```

`(typeof users)[number]` gets the type of **a single element** of the `users` array.

---

## Example 5. Combined with mapped types

Index Access is often used inside mapped types:

```javascript
type User = { id: number; name: string; isAdmin: boolean };

type Nullable<T> = {
  [K in keyof T]: T[K] | null;
};

type NullableUser = Nullable<User>;
/*
{
  id: number | null;
  name: string | null;
  isAdmin: boolean | null;
}
*/
```

> Here `T[K]` is used to "take" the type of the original property and modify it.

---

## Example 6. Key restriction

TypeScript checks that you are accessing **an existing property**:

```javascript
type User = { id: number; name: string };

type X = User["email"];
// Error: Property 'email' does not exist on type 'User'
```

This prevents typos and invalid accesses.

---

## Example 7. A universal "ValueOf" type

```javascript
type ValueOf<T> = T[keyof T];

type User = {
  id: number;
  name: string;
  isAdmin: boolean;
};

type UserValue = ValueOf<User>; // number | string | boolean
```

Very often used in utilities and libraries (for example, for Redux action value types or enum values).

---

## Example 8. Getting a type from an enum

```javascript
enum Status {
  Success = "success",
  Error = "error",
}

type StatusType = Status[keyof typeof Status];
// "success" | "error"
```

---

## Key uses of Index Access Types

Extracting a field's type from an interface
Getting the type of an array element (`T[number]`)
Dynamically generating new types (in mapped types)
Constraining generic parameters (`K extends keyof T`)
Building universal utilities (`ValueOf`, `PropType`, `ReturnOf`, and so on)

---

## Summary

| Concept | Description | Example |
|---|---|---|
| **Index Access Type** | Getting a property's type by its key | `User["name"] -> string` |
| **Multiple access** | You can specify several keys | `User["id" |
| **With** `keyof` | Get the union of all value types | `User[keyof User]` |
| **For an array** | Extract the array element type | `T[number]` |
| **Nested** | You can access a chain of properties |  |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts755 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.