Typescript Dictionary Complete Guide with examples

Typescript Dictionary Complete Guide with examples

Typescript Dictionary Class: Learning with Examples

In this blog post, delve into the concept of dictionaries in Typescript through illustrative examples.

A dictionary is a data structure that contains unordered key-value pairs. It resembles the map type in Typescript.

Does TypeScript Have Dictionaries?

While Typescript does not explicitly offer a dictionary type, it provides the Map type, which serves the purpose of storing key-value pairs in an unordered manner. ES6 introduced the Map type, which can be utilized in Typescript by creating Map objects.

You can create a dictionary using Map as shown below:

Using new and Map keyword with key and value types are declared.

valid key and value types are string,number,boolean and class or interface objects.

let dictionary = new Map<string, string>();

How to Declare and Initialize a Dictionary in TypeScript?

A map is a type introduced in ES6, It adds type safety to key and values in typescript. It is an alias for Dictionary

  • the declare and create a map variable using new operator and key and value types are declared

    let employees = new Map<string, string>();

  • add the key-value pairs to an map using set method.

    employees.set("name", "john");

  • check for key exists or using has() method

// Checking for the key exist :
employees.has("name"); // true
  • get the value with a key using get method.
// get a value by a key:
employees.get("name"); // john
  • delete a key and its value using delete method.
// delete an item by a key:
employees.delete("name");
  • Iterate the map with keys and values using forEach with callback
// iterate key and values
employees.forEach((item, key) => console.log(item));
  • Remove all elements(keys and value) from a map using clear() method
// remove all from map:
employees.clear();
  • get the number of elements in a map
// size:Number of elements in Map :
console.log(employees.size);
  • retrieve all keys and values with insertion order
// get All keys with insertion order
let keys = Array.from(employees.keys());

// Extract values with insertion order
let values = Array.from(employees.values());

Here is an complete example

let employees = new Map<string, string>();
employees.set("name", "john");

// Checking for the key exist :
employees.has("name"); // true

// get a value by a key:
employees.get("name"); // john

// delete an item by a key:
employees.delete("name");
// iterate key and values
employees.forEach((item, key) => console.log(item));

// remove all from map:
employees.clear();

// size:Number of elements in Map :
console.log(employees.size);

// get All keys with insertion order
let keys = Array.from(employees.keys());

// Extract values with insertion order
let values = Array.from(employees.values());

How to get key values from a dictionary in TypeScript?

following are steps required to get key values from a dictionary or map in typescript.

  • one way using map.keys returns list of keys
  • Another using for each
employees.forEach((item, key) => console.log(key));

How to iterate through keys in TypeScript Dictionary?

Multiple ways to return the keys of an map in Typescript

// iterate key and values
employees.forEach((item, key) => console.log(item));

How to declare an interface for a dictionary in typescript?

Declare an interface using indexable type in typescript

It accepts a key as a string and value of type T

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

A class contains properties of the dictionary interface as below.

export class AllEmployees {
  employees: Dictionary<string> = {};
}

Dictionary interfaces declare with let keyword and initialize the values, add the values.

let emps: Dictionary<string> = {};
emps["name"] = "john";

How to declare a dictionary with record type in typescript

The Record type in Typescript is used to represent a map of key-value pairs. You can declare a dictionary using the Record type.

type emps = Record<string, string>;

Then, you can initialize the dictionary with data as follows.

let emps: Record<string, string> = {
   {"name": "john" },
   {"id":  "1" }
};

Conclusion

This post provided comprehensive examples on how to work with dictionaries in Typescript, including declaring interfaces and utilizing the Record type. Dictionaries offer a convenient way to manage key-value pairs in Typescript applications.