Index signatures for dynamic keys in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

What is the output of this TypeScript code using index signatures?

Consider the following TypeScript interface and object:

interface Scores {
  [player: string]: number;
}

const gameScores: Scores = {
  alice: 10,
  bob: 15
};

console.log(gameScores['alice']);
console.log(gameScores['charlie']);

What will be printed to the console?

Typescript

interface Scores {
  [player: string]: number;
}

const gameScores: Scores = {
  alice: 10,
  bob: 15
};

console.log(gameScores['alice']);
console.log(gameScores['charlie']);

A 10 and undefined

B 10 and 0

C Error at compile time

D undefined and undefined

💡 Hint

Think about what happens when you access a key that does not exist in an object.

The index signature allows any string key with a number value. Accessing 'alice' returns 10. Accessing 'charlie' returns undefined because that key is not set.

📝 Syntax

intermediate

Which option correctly declares an index signature for dynamic keys with string values?

Choose the correct TypeScript syntax for an interface that allows any string key with a string value.

A interface Data { key: string; }

B interface Data { [key]: string; }

C interface Data { [key: number]: string; }

D interface Data { [key: string]: string; }

💡 Hint

Index signatures require a type for the key inside square brackets.

Option D correctly uses [key: string] to declare an index signature for string keys with string values.

🔧 Debug

advanced

Why does this TypeScript code cause an error?

Given this interface and object:

interface Config {
  [key: string]: number;
  port: number;
}

const serverConfig: Config = {
  port: 8080,
  host: 'localhost'
};

Why does this code cause a TypeScript error?

A Because 'host' has a string value but the index signature requires number values

B Because 'port' is missing from the object

C Because index signatures cannot be combined with explicit properties

D Because the interface is missing a string index signature

💡 Hint

Check the types of all properties against the index signature type.

The index signature says all keys must have number values. 'host' has a string value, so it violates the index signature.

❓ optimization

advanced

How to optimize a TypeScript interface with index signatures for mixed value types?

You want an interface that allows any string key with either a string or number value. Which is the best way to declare it?

A interface Mixed { [key: string]: string & number; }

B interface Mixed { [key: string]: string | number; }

C interface Mixed { [key: string]: any; }

D interface Mixed { [key: string]: string; [key: string]: number; }

💡 Hint

Consider union types for values in index signatures.

Option B uses a union type (string | number) which allows values to be either string or number for any key.

🧠 Conceptual

expert

What is a limitation of using index signatures with dynamic keys in TypeScript?

Which statement best describes a limitation when using index signatures for dynamic keys?

A Index signatures can only be used with number keys, not string keys

B Index signatures allow different value types for each key without restriction

C All explicitly declared properties must conform to the index signature's value type

D You cannot combine index signatures with any other properties in an interface

💡 Hint

Think about how explicit properties relate to the index signature type.

When an interface has an index signature, all explicitly declared properties must have values compatible with the index signature's 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