Index access types

TypeScriptJunior~2 min read

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"]`

Short Answer

Interview ready

Premium

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