How to Use Associative Array in TypeScript?

An object with one or more elements is known as an array. Each of these components can be an object or a simple data type. For example, you can put dates, strings, and numbers in the same array. Information can also be stored using associative arrays. An array that employs strings as indexes is known as an associative array.

You can create a mixed array that uses numeric and string indexes within a single array. The length of an array will only reflect the number of entries with numeric indexes if it has both numeric and string indexes. In terms of functionality, associative arrays and numeric arrays are similar. However, they differ in the words of their index. Each ID key in an associative array has a corresponding value.

In TypeScript, an associative array is an interface that lists keys with corresponding values. It can be used like a regular array, but the only difference is that it can be accessed using strings instead of numbers.

Syntax

interface AssociativeArray {
   [key: string]: string
}
var associative_array: AssociativeArray[] = []
associative_array['key'] = 'value'

console.log(associative_array['key'])
// Output:
// value

In the above syntax, we declare an associative array interface and an object of it, It looks the same as a normal array, but we use a string ‘key’ for the index and a value ‘value.’ We accessed the stored value by using our key.

Example 1

In the below example, we use the associative array to store a series of values with indexing as a string or key. We store name, language, roll, and phone number in the associative array and then retrieve the values from it. We displayed all the values in the console. We have declared an interface AssociativeArray to store the data type of the associative array.

interface AssociativeArray {
   [key: string]: string
}

var associative_array: AssociativeArray[] = []
associative_array['name'] = 'Tutorialspoint'
associative_array['language'] = 'TypeScript'
associative_array['roll'] = 12345
associative_array['phone'] = 9999999999

console.log('Name: ', associative_array['name'])
console.log('Language: ', associative_array['language'])
console.log('Roll: ', associative_array['roll'])
console.log('Phone: ', associative_array['phone'])

On compiling, it will generate the following JavaScript code −

var associative_array = [];
associative_array['name'] = 'Tutorialspoint';
associative_array['language'] = 'TypeScript';
associative_array['roll'] = 12345;
associative_array['phone'] = 9999999999;
console.log('Name: ', associative_array['name']);
console.log('Language: ', associative_array['language']);
console.log('Roll: ', associative_array['roll']);
console.log('Phone: ', associative_array['phone']);

Output

The above code will produce the following output −

Name:  Tutorialspoint
Language:  TypeScript
Roll:  12345
Phone:  9999999999

In the output, we showed all the stored values of the associated array.

Example 2

In the below example, we will see how to loop through the associative array. We are taking an associative array that stores the ‘hello’ word in different languages. Looping through the associative array is not like looping in a normal array because, in this case, we will get the keys of the associative array while using the ‘for in’ looping mechanism. We also need to use that key to get the actual stored values of the associative array. It is a very easy way to get all of the associative array’s values without manually getting them one by one. We have declared an interface AssociativeArray to store the data type of the associative array.

interface AssociativeArray {
   [key: string]: string
}

// declaring associative array
var hello_associated_array: AssociativeArray[] = []
hello_associated_array['english'] = 'Hello'
hello_associated_array['spanish'] = 'hola'
hello_associated_array['french'] = 'Bonjour'
hello_associated_array['german'] = 'Guten tag'
hello_associated_array['italian'] = 'salve'

// looping through associative array
for (let key in hello_associated_array) {
   console.log(key + ': ' + hello_associated_array[key])
}

On compiling, it will generate the following JavaScript code −

// declaring associative array
var hello_associated_array = [];
hello_associated_array['english'] = 'Hello';
hello_associated_array['spanish'] = 'hola';
hello_associated_array['french'] = 'Bonjour';
hello_associated_array['german'] = 'Guten tag';
hello_associated_array['italian'] = 'salve';

// looping through associative array
for (var key in hello_associated_array) {
   console.log(key + ': ' + hello_associated_array[key]);
}

Output

The above code will produce the following output −

english: Hello
spanish: hola
french: Bonjour
german: Guten tag
italian: salve

Just like we have used the ‘for in’ looping mechanism, we can also use the ‘forEach’ for looping through the associative array. The normal array's properties and methods are available on the associative array, which is a very powerful tool.