Defining And Using Key-Value Pair In TypeScript

Let’s figure out the answer for defining and using key-value pair in TypeScript. Everything you need is in this article. Check it out now.

Table of Contents

Using index signature

To define a key-value pair in TypeScript, we use the index signature.

The index signature’s syntax is very simple. It looks like we are declaring a property for an object. However, we do not declare a specific key-value pair. Instead, we define the key and value types.

Syntax:

{ [key: KeyType]: ValueType }

Index signature is used when we do not know the specific names of the properties nor the corresponding values in advance. But we know their shape.

Take a look at this example for a better understanding:

const car: { [key: string]: string } = {};

car.brand = "Audi";
car.model = "A8";

In the above example, we use the index signature to create an object with all properties having keys and values as ‘string‘. You can add any key-value pair you want as long as the index signature [key: string]: string is satisfied. If you try to add properties with an incorrect format, you will get an error:

const car: { [key: string]: string } = {};

car.year = 2022;
car.color = ["yellow", "black"];

Output:

Type 'number' is not assignable to type 'string'.
Type 'string[]' is not assignable to type 'string'.

As you can see, we cannot add two new properties with values other than ‘string‘. The type checker detected that we tried to add ‘number‘ and ‘array‘ values to the object and returned error messages. We can set the value type to ‘any‘ to overcome this issue.

const car: { [key: string]: any } = {};

car.brand = "Audi";
car.model = "A8";
car.year = 2022;
car.color = ["yellow", "black"];

console.log(car);

Output:

{
  brand: 'Audi',
  model: 'A8',
  year: 2022,
  color: [ 'yellow', 'black' ]
}

Now you can add the property with any value you want.

Another remarkable case, look at the example below, and then I will explain it to you.

type Cars = {
    brand: string,
    model: string,
    year: number,
    [key: string]: string
};

Output:

Property 'year' of type 'number' is not assignable to 'string' index type 'string'.

We get this error because we declare that all keys of type string have a value of ‘string‘. Therefore, adding a property whose value is ‘number’ will not be accepted in this case.

You can use the ‘any‘ keyword like the above example to fix this problem. Or another way is to use the union type.

type Cars = {
    brand: string,
    model: string,
    year: number,
    [key: string]: string | number
};

Using TypeScript Record

TypeScript Record is also a way you might consider using to define and use key-value pairs.

Record takes two parameters, the first parameter will be the type of the name of the properties, and the second parameter will be the type for all the properties of that object.

Syntax:

Record<Keys, Type>

Here is an example:

const car: Record<string, string> = {};
car.brand = "BMW";
car.model = "X6";
console.log(car);

Output:

{
  "brand": "BMW",
  "model": "X6"
}

In this example, I created an object with all properties in the same format – each property has a key and value pair of a string using TypeScript Record.

It basically works the same way you use the index signature. You also cannot add a new property that does not satisfy the format defined inside Record.

car.year = 2022;
car.color = ["white", "yellow"];

Output:

Type 'number' is not assignable to type 'string'.
Type 'string[]' is not assignable to type 'string'.

Summary

I have just shown you the methods for defining and using key-value pair in TypeScript. I hope this information will help you in your projects. Thank you for being so interested in this article.

Maybe you are interested:

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js

Defining And Using Key-Value Pair In TypeScript – How to do it?