Computed Member Access

The [] operator in TypeScript operates at both the value level for dynamic property access and the type level for indexed access types, mapped types, array declarations, and tuple definitions. Its primary TypeScript-specific utility lies in the type system, where it evaluates and extracts the type of a specific property or index within another type, or iterates over keys to construct new types.

Indexed Access Types (Type Lookups)

At the type level, the [] operator retrieves the type of a property from an existing type. The index passed inside the brackets must itself be a type—typically a string literal type, a numeric literal type, or a union of literal types.

type Person = {
  name: string;
  age: number;
  isEmployed: boolean;
};

// Single property lookup
type NameType = Person["name"]; // Evaluates to: string

// Union property lookup
type MultiType = Person["name" | "age"]; // Evaluates to: string | number

// keyof lookup
type AllValues = Person[keyof Person]; // Evaluates to: string | number | boolean

Array and Tuple Element Type Extraction

When applied to array or tuple types, the [] operator extracts the underlying element types. Passing the number keyword as the index type extracts a union of all possible element types. Passing a specific numeric literal type extracts the type at that exact positional index within a tuple.

type Roles = string[];
type RoleType = Roles[number]; // Evaluates to: string

type MixedTuple = [string, number, boolean];

// Extracting all elements
type TupleElements = MixedTuple[number]; // Evaluates to: string | number | boolean

// Extracting a specific positional element
type FirstElement = MixedTuple[0]; // Evaluates to: string

Mapped Types

Within type definitions, the [] operator is used to define mapped types. By combining [] with the in keyword, TypeScript iterates over a union of literal types to programmatically declare properties and their corresponding types.

type Options = "read" | "write" | "execute";

type Flags = { 
  [K in Options]: boolean 
};
// Evaluates to: { read: boolean; write: boolean; execute: boolean; }

Array and Tuple Type Declarations

The [] operator is used syntactically to define the structural shape of arrays and tuples.

Array Types: Appending [] to a type identifier denotes a homogenous array of that specific type.

type StringArray = string[];

Tuple Types: Enclosing a comma-separated list of types within [] defines a tuple. A tuple is a fixed-length array where each element has a specific, known type at a specific positional index.

type Coordinate = [number, number, string];

Value-Level Index Signatures

At the value level, [] performs standard JavaScript bracket notation access. TypeScript enforces type safety based on the object’s defined index signature or known properties. If an object lacks an index signature, TypeScript restricts [] access to explicitly defined literal keys to prevent implicit any types.

The inferred type of a dynamically accessed property depends heavily on the noUncheckedIndexedAccess compiler option. When enabled, TypeScript automatically appends | undefined to the inferred type of any indexed access, strictly modeling the runtime possibility that the key does not exist.

interface Dictionary {
  [key: string]: number; // Index signature defining the type of [] access
}

const dict: Dictionary = { a: 1, b: 2 };

// Default compiler behavior:
const val = dict["c"]; // Inferred as type: number (evaluates to undefined at runtime)

// With 'noUncheckedIndexedAccess' enabled in tsconfig.json:
const safeVal = dict["c"]; // Inferred as type: number | undefined

Master TypeScript with Deep Grasping Methodology!

Learn More