In this article, we will explore various techniques for working with objects with dynamic keys in TypeScript and provide code samples to illustrate each method. Let's get started!

1,  Using Index Signatures

Index signatures are a powerful feature in TypeScript that enables you to define objects with dynamic keys. An index signature can be added to an interface or type alias, defining the types of the keys and values that the object can hold.

interface Dictionary<T> {
  [key: string]: T;
}

const userScores: Dictionary<number> = {
  alice: 100,
  bob: 120,
  carol: 90,
};

console.log(userScores["alice"]); // Output: 100

2,  Using Record Utility Type

The Record utility type is another way to define objects with dynamic keys in TypeScript. It allows you to create a new type with keys of a specific type and values of another type.

type UserRoles = Record<string, string>;

const roles: UserRoles = {
  alice: "admin",
  bob: "editor",
  carol: "viewer",
};

console.log(roles["bob"]); // Output: "editor"

3,  Using Mapped Types

Mapped types are a powerful feature that allows you to create new types based on existing ones, transforming their properties as needed. They can be used to create objects with dynamic keys by iterating over a union of key types and mapping them to a specific value type.

type AllowedKeys = "alice" | "bob" | "carol";
type UserAge = { [K in AllowedKeys]: number };

const userAges: UserAge = {
  alice: 30,
  bob: 35,
  carol: 25,
};

console.log(userAges["carol"]); // Output: 25

4,  Manipulating Objects with Dynamic Keys

Once you have an object with dynamic keys, you may need to perform various operations, such as adding, updating, or removing properties, or iterating over the keys and values.

// Adding a property
userScores["dave"] = 80;

// Updating a property
userScores["alice"] = 110;

// Removing a property
delete userScores["bob"];

// Iterating over keys and values
for (const key in userScores) {
  if (Object.prototype.hasOwnProperty.call(userScores, key)) {
    console.log(`${key}: ${userScores[key]}`);
  }
}

5,  Accessing Nested Objects with Dynamic Keys

Sometimes, you may need to work with nested objects that have dynamic keys. You can use index signatures and nested types to define the structure of such objects.

interface NestedDictionary<T> {
  [key: string]: T | NestedDictionary<T>;
}

const userPreferences: NestedDictionary<string> = {
  alice: {
    theme: "dark",
    language: "en",
  },
  bob: {
    theme: "light",
    language: "es",
  },
};

console.log(userPreferences["alice"]["theme"]); // Output: "dark"

Conclusion

TypeScript provides a rich set of features that allow developers to work with objects that have dynamic keys. By using index signatures, the Record utility type, mapped types, and nested types, you can define and manipulate objects with dynamic keys efficiently and safely. Understanding these techniques is essential for managing complex and evolving data structures in your TypeScript applications.

In this article, we covered various techniques for working with objects with dynamic keys in TypeScript, such as:

• Using index signatures to define the types of keys and values that an object can hold
• Leveraging the Record utility type to create a new type with keys and values of specific types
• Employing mapped types to create new types based on existing ones and mapping them to specific value types
• Manipulating objects with dynamic keys by adding, updating, removing properties, and iterating over keys and values
• Accessing nested objects with dynamic keys using nested types and index signatures

By mastering these techniques, you'll be able to work with dynamic data structures more effectively, resulting in cleaner and more maintainable code. Whether you're building a complex data processing pipeline or simply need to manage application state, understanding how to work with objects with dynamic keys in TypeScript is an essential skill for any developer.

If you are interested in similar posts, take a look at my home page to find similar articles.