Indexed access types in Typescript - Step-by-Step Execution

Concept Flow - Indexed access types

Define object type

↓

Use indexed access type: Type[Key

↓

Extract property type

↓

Use extracted type in variable or function

Indexed access types let you get the type of a property from an object type using its key.

Execution Sample

Typescript

type Person = { name: string; age: number };
let personName: Person['name'];
personName = "Alice";

This code extracts the type of 'name' from Person and uses it for personName.

Execution Table

Step	Action	Evaluation	Result
1	Define type Person	Person = { name: string; age: number }	Person type created
2	Use indexed access type Person['name']	Person['name']	string
3	Declare variable personName with type Person['name']	let personName: Person['name']	Variable declared
4	Assign "Alice" to personName	personName = "Alice"	personName = "Alice"
5	Use personName as string	typeof personName	"string"

💡 All steps complete, personName holds a string as expected

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
personName	undefined	undefined	undefined	undefined	"Alice"

Key Moments - 2 Insights

Why does Person['name'] give the type string?

Because Person defines 'name' as string, so indexed access extracts that exact type (see execution_table step 2).

Can I assign a number to personName?

No, personName is typed as string from Person['name'], so assigning a number would cause a type error (see execution_table step 4).

Visual Quiz - 3 Questions

Look at the execution_table, what type does Person['age'] represent?

A string

B number

C boolean

D any

💡 Hint

Check execution_table step 2 where Person['name'] is string; similarly, Person['age'] is number.

At which step is the variable personName assigned a value?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at execution_table step 4 where personName is assigned "Alice".

If Person['name'] was changed to number, what would happen to personName's type?

A It becomes number

B It stays string

C It becomes any

D It causes a syntax error

💡 Hint

Indexed access types reflect the property type exactly, so changing Person['name'] changes personName's type (see concept_flow).

Concept Snapshot

Indexed access types syntax: TypeName[Key]
Extracts the type of a property from an object type.
Useful to reuse property types without repeating.
Example: type NameType = Person['name'] gives string.
Keeps types consistent and DRY.

Full Transcript

Indexed access types in TypeScript let you get the type of a property from an object type by using the property key in square brackets. For example, if you have a type Person with properties name and age, you can get the type of name by writing Person['name'], which is string. This helps you reuse types without repeating them. In the example, we declare a variable personName with type Person['name'], so personName must be a string. Assigning a string to personName works fine. This visual trace shows each step: defining the type, extracting the property type, declaring the variable, assigning a value, and confirming the type. Remember, if the property type changes, the indexed access type changes too, keeping your code consistent.