TypeScript Hashmap Interface: Adding and Accessing Data

Product Support
, ,
#1

I’m trying to implement a TypeScript hashmap (dictionary) interface. So far, I have the following:

export interface IHash { [details: string]: string; } I’m having trouble understanding what exactly this syntax means. If I were to do var x: IHash = {}; how would I go about adding and accessing the data?

#2

To work with a TypeScript hashmap, it’s quite simple and similar to handling a regular JavaScript object. Here’s a quick example:

export interface IHash {
    [details: string]: string;
}

let myhash: IHash = {};   

myhash["somestring"] = "value"; // setting a value
let value = myhash["somestring"]; // getting a value

In this IHash interface, the syntax [details: string]: string means two things:

  1. It tells TypeScript that the object can have any string-based key.
  2. It ensures all values associated with those keys must be strings.

If you need more flexibility, you can change the value type to any to allow values of various types. Here’s an example with IPerson:

export interface IPerson {
    name: string;
    age: number;
    [key: string]: any;
}

You could also use TypeScript’s Map class if you want to work with more than just string keys:

let map = new Map<object, string>(); 
let key = new Object();
map.set(key, "value");
console.log(map.get(key)); // Outputs: "value"

The Map class allows any object to be used as a key, which can be very useful in certain cases!

#3

Another interesting approach to implementing a TypeScript hashmap is by using a class with an index signature. This lets you add more structure and functionality while encapsulating your logic within methods:

class HashMap {
    [key: string]: string;

    constructor() {
        // Initialization logic if needed
    }

    set(key: string, value: string): void {
        this[key] = value;
    }

    get(key: string): string | undefined {
        return this[key];
    }

    delete(key: string): void {
        delete this[key];
    }
}

let myHashMap = new HashMap();
myHashMap.set("somestring", "value");
console.log(myHashMap.get("somestring")); // Outputs: "value"

By using a class, you can encapsulate any additional functionality that a typical TypeScript hashmap might require, such as handling special key types or integrating business logic. This also provides a clearer structure and makes it easier to manage if your hashmap grows in complexity.

#4

You can take things a step further by making your TypeScript hashmap more flexible using generics. This way, you can define not only the key type (like string, number, or symbol) but also the value type for strong typing.

Here’s an example using a generic interface:


interface IGenericHash<K extends string | number | symbol, V> {

[key: string]: V;

}

let stringHashMap: IGenericHash<string, string> = {};

stringHashMap["key1"] = "value1";

console.log(stringHashMap["key1"]); // Outputs: "value1"

let numberHashMap: IGenericHash<number, number> = {};

numberHashMap[1] = 100;

console.log(numberHashMap[1]); // Outputs: 100

This approach provides more flexibility in key-value pair types, making your TypeScript hashmap adaptable for different use cases while maintaining strong typing. It’s especially useful when you need a dictionary-like structure but with variable key and value types.