Index Signatures for Objects

Part of the Introduction To TypeScript section of Coddy's JavaScript journey — lesson 72 of 73.

Sometimes you need to work with objects where you know what type of values they'll contain, but you don't know the specific property names in advance. This is common when working with dictionaries, maps, or configuration objects where the keys are dynamic.

Index signatures allow you to define the type structure for such objects. The syntax uses square brackets to specify the key type and the value type:

interface StringDictionary {
  [key: string]: number;
}

This interface says "any string key will have a number value." You can then create objects that match this pattern:

let scores: StringDictionary = {
  "alice": 95,
  "bob": 87,
  "charlie": 92
};

Index signatures are particularly useful for scenarios like storing user preferences, caching data with dynamic keys, or working with API responses where the property names aren't known at compile time. The key type is typically string or number, while the value type can be any valid TypeScript type.

Challenge

Easy

Create an interface for a product catalog system where product categories and their stock quantities are stored dynamically.

Create an interface named ProductCatalog that uses an index signature to map string keys (product names) to number values (stock quantities).

Create a function named getStockLevel that:

Takes two parameters: catalog of type ProductCatalog and productName of type string
Returns the stock quantity for the given product name
Returns 0 if the product doesn't exist in the catalog
Has an explicit return type of number

Create a function named updateStock that:

Takes three parameters: catalog of type ProductCatalog, productName of type string, and newQuantity of type number
Updates the stock quantity for the given product
Returns void

Create a function named getTotalStock that:

Takes a parameter catalog of type ProductCatalog
Returns the sum of all stock quantities in the catalog
Has an explicit return type of number

Create test data:

Create inventory of type ProductCatalog with the following products:
- "laptop": 15
- "mouse": 50
- "keyboard": 25
- "monitor": 8

Test your functions and print the following outputs:

Call getStockLevel with inventory and "laptop"
Call getStockLevel with inventory and "tablet"
Call getTotalStock with inventory
Call updateStock with inventory, "mouse", and 75
Call updateStock with inventory, "webcam", and 12
Call getStockLevel with inventory and "mouse"
Call getStockLevel with inventory and "webcam"
Call getTotalStock with inventory

Try it yourself

// TODO: Write your code here

// Create the ProductCatalog interface


// Create the getStockLevel function


// Create the updateStock function


// Create the getTotalStock function


// Create test data - inventory object


// Test the functions and print results
console.log(getStockLevel(inventory, "laptop"));
console.log(getStockLevel(inventory, "tablet"));
console.log(getTotalStock(inventory));
updateStock(inventory, "mouse", 75);
updateStock(inventory, "webcam", 12);
console.log(getStockLevel(inventory, "mouse"));
console.log(getStockLevel(inventory, "webcam"));
console.log(getTotalStock(inventory));

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Index Signatures for Objects

All lessons in Introduction To TypeScript