Index Types in TypeScript
In TypeScript, index types are a set of features that let you work with object properties dynamically but still type‑safely.
The term usually refers to three closely related concepts:
Index signatures
Indexed access types
Using keyof with index access
I’ll explain them step by step and show how they work together.
1. The problem index types solve
In JavaScript, you often access properties dynamically:
obj[key]
But TypeScript wants to make sure:
The key is valid
The value type is correct
Index types are how TypeScript does that safely.
2. Index signatures (dynamic keys)
An index signature describes objects with unknown or dynamic property names, but known value types.
Example
type Scores = {
[name: string]: number;
};
This means:
Keys are strings
Values are numbers
Usage:
const scores: Scores = {
Alice: 10,
Bob: 20
};
scores["Charlie"] = 15; // OK
scores["Alice"] = "high"; // Error
3. Number index signatures
Used for array‑like objects.
type StringArray = {
[index: number]: string;
};
const arr: StringArray = ["a", "b", "c"];
Important rule:
Number index signatures must be compatible with string index signatures (because JS converts numbers to strings internally).
4. Indexed access types (type lookup)
An indexed access type lets you get the type of a property.
Example
type User = {
id: number;
name: string;
};
type NameType = User["name"];
Result:
NameType is string
This works like type‑level property access.
5. Indexed access with unions
type User = {
id: number;
name: string;
active: boolean;
};
type ValueTypes = User["id" | "name"];
Result:
number | string
6. keyof + indexed access (very important)
This is one of the most powerful TypeScript patterns.
type User = {
id: number;
name: string;
};
type UserValue = User[keyof User];
Step by step:
keyof User → "id" | "name"
User["id" | "name"] → number | string
So:
UserValue is number | string
7. Safe dynamic property access in functions
function getValue(obj: User, key: keyof User) {
return obj[key];
}
Now:
Only valid keys are allowed
Return type matches the property type
Usage:
getValue(user, "name"); // string
getValue(user, "id"); // number
getValue(user, "age"); // Error
8. Index types vs index signatures (difference)
Concept Purpose
Index signature Describe objects with unknown keys
Indexed access type Look up a property’s type
keyof Get union of valid keys
They are often used together, but they are not the same thing.
9. Common real‑world use cases
Dictionaries and maps
Form values keyed by field name
Configuration objects
Generic utility functions
Safe object access helpers
10. Common mistakes
Assuming index signatures restrict known keys
type Data = {
[key: string]: number;
length: string; // Error
};
Why:
All properties must match the index signature value type
Forgetting that index access is compile‑time only
type X = User["name"];
This exists only in the type system, not at runtime.
Mental model
Think of index types as:
“Safe brackets for types — just like obj[key], but for the type system.”
Quick summary
Index signatures define dynamic object shapes
Indexed access types retrieve property types
keyof gives you valid property names
Combining them enables safe dynamic access
Index types are essential for advanced TypeScript