Working with Key-Value Pairs in TypeScript

TypeScript, a superset of JavaScript, provides several ways to work with key-value pairs, which are essential data structures in programming. A key-value pair is an unordered collection of unique keys and their corresponding values. In this tutorial, we will explore the different methods available in TypeScript for creating and manipulating key-value pairs.

Index Signatures

One way to represent a key-value pair in TypeScript is by using index signatures. An index signature is a way to define an object type that has string or number indices with a specific value type. Here’s an example:

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

let foo: Foo = {};
foo['hello'] = 123;
console.log(foo['hello']); // Output: 123

In this example, Foo is an interface that defines an object with a string index signature and a value type of number. We can then create an object foo of type Foo and assign values to it using the bracket notation.

Maps

Another way to work with key-value pairs in TypeScript is by using the built-in Map class. A Map is a collection of key-value pairs where each key is unique and maps to a specific value. Here’s an example:

let myMap = new Map<string, number>();
myMap.set('hello', 123);
console.log(myMap.get('hello')); // Output: 123

In this example, we create a Map object with string keys and number values. We can then use the set method to add key-value pairs to the map and the get method to retrieve values by their corresponding keys.

Record Type

TypeScript also provides a built-in type called Record, which represents an object type with a specific set of properties. Here’s an example:

const myObject: Record<string, string> = {
    'hello': 'world',
};

console.log(myObject['hello']); // Output: world

In this example, we define an object myObject with a record type that has string keys and values.

KeyValuePair Interface

If you need to represent a key-value pair as a single unit, you can define an interface like KeyValuePair. Here’s an example:

interface KeyValuePair {
    key: string;
    value: number;
}

let foo: KeyValuePair = { key: 'hello', value: 123 };
console.log(foo.key); // Output: hello
console.log(foo.value); // Output: 123

In this example, we define an interface KeyValuePair with two properties: key and value. We can then create objects of type KeyValuePair to represent key-value pairs.

Tuples

Finally, you can also use tuples to represent a small collection of values as a single unit. Here’s an example:

let x: [string, number] = ['hello', 123];
console.log(x[0]); // Output: hello
console.log(x[1]); // Output: 123

In this example, we define a tuple type [string, number] and create a variable x with an initial value. We can then access the elements of the tuple using their index.

Conclusion

In conclusion, TypeScript provides several ways to work with key-value pairs, including index signatures, maps, record types, key-value pair interfaces, and tuples. Each method has its own strengths and use cases, and choosing the right one depends on your specific requirements.