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.

Practice

1. What does the TypeScript indexed access type Person['name'] represent?

easy

A. A function that returns the 'name' property

B. The type of the 'name' property in the Person type

C. An error because 'name' is not a valid type

D. A new property called 'name' added to Person

Solution

1. Step 1: Understand indexed access syntax

   The syntax Type['property'] extracts the type of the specified property from the given type.

2. Step 2: Apply to Person['name']

   This means Person['name'] is the type of the 'name' property inside the Person type.

3. Final Answer:

   The type of the 'name' property in the Person type -> Option B

4. Quick Check:

   Indexed access type = property type [OK]

Hint: Remember: Type['prop'] gives the type of that property [OK]

Common Mistakes:

• Thinking it creates a new property
• Confusing it with a function call
• Assuming it causes a syntax error

2. Which of the following is the correct syntax to get the type of property age from type Person using indexed access types?

easy

A. type AgeType = Person['age'];

B. type AgeType = Person.age;

C. type AgeType = Person("age");

D. type AgeType = Person<age>;

Solution

1. Step 1: Recall indexed access syntax

   The correct syntax uses square brackets with the property name as a string: Type['property'].

2. Step 2: Check each option

   type AgeType = Person['age']; matches this syntax exactly: Person['age']. Others use dot notation or parentheses which are invalid here.

3. Final Answer:

   type AgeType = Person['age']; -> Option A

4. Quick Check:

   Use square brackets with quotes for indexed access [OK]

Hint: Use square brackets and quotes for property names [OK]

Common Mistakes:

• Using dot notation instead of brackets
• Using parentheses like a function call
• Using angle brackets incorrectly

3. Given the type type Person = { name: string; age: number; }, what is the type of Person['age']?

medium

A. string

B. boolean

C. any

D. number

Solution

1. Step 1: Look at the Person type definition

   The property 'age' in Person is defined as a number.

2. Step 2: Indexed access extracts that type

   So Person['age'] is the type number.

3. Final Answer:

   number -> Option D

4. Quick Check:

   Person['age'] = number [OK]

Hint: Check the property type inside the original type [OK]

Common Mistakes:

• Confusing 'age' type with 'name' type
• Assuming default any type
• Mixing up string and number types

4. What is wrong with this TypeScript code?

type Person = { name: string; age: number; };
type AgeType = Person[age];

medium

A. AgeType cannot be assigned

B. Person type is not defined

C. Missing quotes around 'age' in indexed access

D. No error, code is correct

Solution

1. Step 1: Identify the indexed access syntax error

   In Person[age], 'age' should be a string literal in quotes: Person['age'].

2. Step 2: Understand why quotes are needed

   Without quotes, TypeScript treats age as a variable, which is undefined here, causing an error.

3. Final Answer:

   Missing quotes around 'age' in indexed access -> Option C

4. Quick Check:

   Property names in indexed access need quotes [OK]

Hint: Always put property names in quotes inside brackets [OK]

Common Mistakes:

• Omitting quotes around property names
• Assuming dot notation works in type access
• Confusing variables with string literals

5. Given the type type Config = { options: { debug: boolean; verbose: boolean; }; version: string; }, which type correctly extracts the type of the debug property using indexed access types?

hard

A. Config['options']['debug']

B. Config.options.debug

C. Config['debug']

D. Config['options.debug']

Solution

1. Step 1: Understand nested indexed access

   The 'debug' property is inside 'options', so we first access 'options' then 'debug'.

2. Step 2: Apply chained indexed access syntax

   Use Config['options']['debug'] to get the type of 'debug'.

3. Step 3: Check other options

   Config.options.debug uses dot notation which is invalid in type access. Config['debug'] tries to access 'debug' directly on Config which doesn't exist. Config['options.debug'] treats 'options.debug' as a single property name which is incorrect.

4. Final Answer:

   Config['options']['debug'] -> Option A

5. Quick Check:

   Use chained brackets for nested properties [OK]

Hint: Chain brackets for nested property types [OK]

Common Mistakes:

• Using dot notation in type access
• Accessing nested property directly without parent
• Treating nested keys as single string