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 is an index access type

**The idea is simple:**

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

Syntax:

```javascript
T[K]
```

where

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

### 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 as when accessing an object 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 builds a **union of the properties' 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 saying "all possible value types of the object".

## Example 2. Nested properties

You can reach into 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 use 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.
> This 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 be used for arrays too:

```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 original property's type and modify it.

## Example 6. Restricting keys

TypeScript checks that you are accessing **a property that actually exists**:

```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. The 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 value types).

## 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** | Get a property's type by its key | `User["name"] → string` |
| **Multiple access** | You can specify several keys at once | `User["name" \| "isAdmin"]` |
| **With** `keyof` | Get a union of all value types | `User[keyof User]` |
| **For an array** | Extract the type of an array element | `T[number]` |
| **Nested** | You can reach into a chain of properties | `Post["author"]["name"]` |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.