Index signatures for dynamic keys in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare an index signature for a dynamic key in a TypeScript interface.

Typescript

interface UserData {
  [[1]: string]: number;
}

Drag options to blanks, or click blank then click option'

Aname

Bindex

Cid

Dkey

Attempts:

3 left

💡 Hint

Common Mistakes

Using a reserved word or invalid identifier as the key name.

Omitting the colon after the key name.

The index signature uses a variable name (commonly key) to represent dynamic keys of type string.

2fill in blank

medium

Complete the code to specify the type of values for the dynamic keys in the interface.

Typescript

interface Settings {
  [key: string]: [1];
}

Drag options to blanks, or click blank then click option'

Astring

Bnumber

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using the key type instead of the value type.

Forgetting the semicolon after the value type.

The index signature defines that all dynamic keys have values of type string.

3fill in blank

hard

Fix the error in the index signature declaration to allow dynamic keys with number values.

Typescript

interface Scores {
  [key: [1]]: number;
}

Drag options to blanks, or click blank then click option'

Aany

Bnumber

Cstring

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using number as key type without understanding how keys are coerced to strings.

Using invalid types like boolean for keys.

Index signatures for dynamic keys must use string or number as key types, but string is preferred for object keys.

4fill in blank

hard

Fill both blanks to declare an interface with dynamic keys of type string and values of type boolean.

Typescript

interface Flags {
  [[1]: [2]]: boolean;
}

Drag options to blanks, or click blank then click option'

Aflag

Bstring

Cnumber

Dkey

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the key type and value type.

Using invalid variable names or types.

The index signature uses a variable name (like key) of type string to represent dynamic keys with boolean values.

5fill in blank

hard

Fill all three blanks to declare an interface with dynamic keys of type number and values of type string, using a variable named 'id'.

Typescript

interface DataMap {
  [[1]: [2]]: [3];
}

Drag options to blanks, or click blank then click option'

Aid

Bnumber

Cstring

Dkey

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'key' instead of 'id' as variable name.

Mixing up key and value types.

The index signature uses id as the variable name, number as the key type, and string as the value type.

Practice

1. What is the main purpose of an index signature in TypeScript when working with objects?

easy

A. To create arrays with fixed length

B. To define fixed keys with different types for each key

C. To restrict objects to only one key-value pair

D. To allow objects to have dynamic keys with values of a specific type

Solution

1. Step 1: Understand index signatures

   Index signatures let you define objects that can have any number of keys, but all keys must have values of the same type.

2. Step 2: Compare options

   To allow objects to have dynamic keys with values of a specific type correctly describes this purpose. Options B, C, and D describe other unrelated concepts.

3. Final Answer:

   To allow objects to have dynamic keys with values of a specific type -> Option D

4. Quick Check:

   Index signature = dynamic keys with uniform value type [OK]

Hint: Index signatures mean dynamic keys with same value type [OK]

Common Mistakes:

• Thinking index signatures fix keys instead of allowing dynamic keys
• Confusing index signatures with tuple or array types
• Assuming index signatures restrict to one key-value pair

2. Which of the following is the correct syntax for an index signature allowing string keys and number values in TypeScript?

easy

A. { [key: string]: number }

B. { key: string; value: number }

C. { [key: number]: string }

D. { key: number; value: string }

Solution

1. Step 1: Recall index signature syntax

   The syntax is { [key: KeyType]: ValueType }. For string keys and number values, it is { [key: string]: number }.

2. Step 2: Check options

   { [key: string]: number } matches the correct syntax. { [key: number]: string } reverses key and value types. Options B and D are object properties, not index signatures.

3. Final Answer:

   { [key: string]: number } -> Option A

4. Quick Check:

   Index signature syntax = {[key: string]: number} [OK]

Hint: Index signature syntax: {[key: KeyType]: ValueType} [OK]

Common Mistakes:

• Swapping key and value types in the signature
• Using object property syntax instead of index signature
• Using number keys when string keys are intended

3. Given the following TypeScript code, what will be the output of console.log(userScores['alice'])?

interface Scores {
  [username: string]: number;
}
const userScores: Scores = {
  alice: 10,
  bob: 15
};
console.log(userScores['alice']);

medium

A. 10

B. alice

C. undefined

D. 15

Solution

1. Step 1: Understand the object and index signature

   The interface allows any string key with number values. The object has keys 'alice' and 'bob' with values 10 and 15.

2. Step 2: Access the value for key 'alice'

   Accessing userScores['alice'] returns 10, the value assigned to 'alice'.

3. Final Answer:

   10 -> Option A

4. Quick Check:

   userScores['alice'] = 10 [OK]

Hint: Access dynamic key value directly with bracket notation [OK]

Common Mistakes:

• Confusing key with value and expecting 'alice' as output
• Assuming undefined for existing keys
• Mixing up values of different keys

4. Identify the error in the following TypeScript code using an index signature:

interface Data {
  [key: string]: number;
}
const data: Data = {
  id: 1,
  name: "John"
};

medium

A. The interface should use [key: number] instead

B. The value of 'name' is a string, but should be a number

C. Index signatures cannot use string keys

D. The key 'id' should be a number, not a string

Solution

1. Step 1: Check index signature type

   The interface says all keys (strings) must have number values.

2. Step 2: Check object values

   The 'id' key has value 1 (number), which is correct. The 'name' key has value "John" (string), which violates the number value rule.

3. Final Answer:

   The value of 'name' is a string, but should be a number -> Option B

4. Quick Check:

   Value types must match index signature [OK]

Hint: All values must match index signature type [OK]

Common Mistakes:

• Thinking keys must be numbers instead of strings
• Ignoring value type mismatch errors
• Assuming index signatures allow mixed value types

5. You want to create a TypeScript object to store user preferences where keys are user IDs (numbers) and values are objects with dynamic string keys and boolean values. Which of the following interface definitions correctly models this?

hard

A. interface Preferences { [userId: string]: { [prefKey: number]: boolean } }

B. interface Preferences { userId: number; prefKey: string; value: boolean }

C. interface Preferences { [userId: number]: { [prefKey: string]: boolean } }

D. interface Preferences { [userId: number]: { prefKey: string; value: boolean } }

Solution

1. Step 1: Understand the requirement

   We need an object with number keys (user IDs) and values that are objects with string keys and boolean values.

2. Step 2: Match interface to requirement

   interface Preferences { [userId: number]: { [prefKey: string]: boolean } } uses an index signature for userId as number keys, and nested index signature for preference keys as strings with boolean values, matching the requirement exactly.

3. Final Answer:

   interface Preferences { [userId: number]: { [prefKey: string]: boolean } } -> Option C

4. Quick Check:

   Nested index signatures for dynamic keys [OK]

Hint: Use nested index signatures for nested dynamic keys [OK]

Common Mistakes:

• Using string keys for userId instead of number
• Confusing property syntax with index signatures
• Not nesting index signatures for inner dynamic keys