Index Access Types

TypeScriptJunior~2 min read

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

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.