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.