Index signatures for dynamic keys in Typescript - Step-by-Step Execution

Concept Flow - Index signatures for dynamic keys

Start: Define object type with index signature

↓

Use dynamic key to access or assign value

↓

Check if key type matches index signature

↓

Allow access/assign

↓

Retrieve or update value

↓

End

This flow shows how TypeScript uses index signatures to allow dynamic keys in objects, checking key types and allowing access or assignment if types match.

Execution Sample

Typescript

interface Scores {
  [player: string]: number;
}
const gameScores: Scores = {};
gameScores['Alice'] = 10;
const aliceScore = gameScores['Alice'];

Defines an object type with string keys and number values, assigns a score dynamically, then retrieves it.

Execution Table

Step	Action	Key	Value	Type Check	Result
1	Define interface with index signature	-	-	N/A	Type allows string keys with number values
2	Create empty object gameScores	-	-	N/A	gameScores is {}
3	Assign value 10 to key 'Alice'	Alice	10	string key, number value	Assignment allowed
4	Retrieve value for key 'Alice'	Alice	-	string key	Returns 10
5	Attempt assign string value to key 'Bob'	Bob	"high"	string key, string value	Error: Type mismatch
6	Attempt access with number key 5	5	-	number key	Error: Key type mismatch

💡 Execution stops after type errors on steps 5 and 6 prevent invalid assignments or access.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
gameScores	undefined	{}	{ 'Alice': 10 }	{ 'Alice': 10 }	{ 'Alice': 10 }
aliceScore	undefined	undefined	undefined	10	10

Key Moments - 2 Insights

Why does assigning a string value to a key cause an error?

Because the index signature requires values to be numbers, assigning a string violates the type, as shown in execution_table step 5.

Can we use a number as a key with this index signature?

No, the index signature specifies string keys only, so using a number key causes a type error, as in step 6.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of gameScores after step 3?

A { 'Alice': 10 }

B {}

C { 'Alice': '10' }

D undefined

💡 Hint

Check the 'Value' and 'Result' columns in row for step 3.

At which step does a type error occur due to value type mismatch?

A Step 4

B Step 5

C Step 3

D Step 2

💡 Hint

Look for 'Error: Type mismatch' in the 'Result' column.

If we change the index signature to [player: string]: string, what happens at step 3?

A Assignment allowed with number value

B Assignment allowed with string value

C Error: Type mismatch

D No change

💡 Hint

Refer to the type check logic in execution_table step 3 and how value types must match.

Concept Snapshot

Index signatures allow objects to have dynamic keys of a specified type.
Syntax: {[key: KeyType]: ValueType}
Keys must match KeyType, values must match ValueType.
Access and assignment check these types.
Type errors occur if types mismatch.

Full Transcript

This visual execution trace shows how TypeScript index signatures work for dynamic keys. We start by defining an interface with a string key and number value. Then we create an empty object of that type. Assigning a number value to a string key is allowed and stored. Retrieving the value by key returns the stored number. Assigning a string value to a key causes a type error because it violates the value type. Using a number as a key also causes a type error because the key type must be string. The variable tracker shows how the object and retrieved value change step by step. Key moments clarify why type mismatches cause errors. The quiz tests understanding of these steps and type rules.