Creating a generic hashmap that can accept dynamic keys and an array of type T

Question

Creating a generic hashmap that can accept dynamic keys and an array of type T

In my attempt to create a robust typing interface for a hashmap in typescript,

The hashmap consists of a key with a dynamic string name, and a values array containing a Generic type.

I attempted to define the interface as follows:

export interface DynamicHashmap<T> {
  [dynamicKey: string]: string;
  values: T[];
}

However, it fails to compile and continues to raise an error:

[ts] Property 'values' of type 'T[]' is not assignable to string index type 'string'.

For instance, the generated value corresponding to this type groups values based on an object attribute (in this case, User.group). The dynamicKey is resolved as group.

const user1: User = { id: 'userValue1', group: 'someGroupId' };
const user2: User = { id: 'userValue2', group: 'someGroupId' }; 
const result = {
  group: 'someGroupId',
  values: [
    { id: 'userValue1', group: 'someGroupId' },
    { id: 'userValue2', group: 'someGroupId' }
  ]
}

I suspect that the static values property is conflicting with the dynamic key.

How can I achieve the desired level of strong typing in this scenario?

typescript

Answer 1

Answer №1

The correct definition of the interface is as follows

export interface DynamicHashMap<T> {
  [key: string]: string | T[];
  values: T[];
}

This design is chosen because the [key: string] signifies a universal signature for all keys, hence it is referred to as an index signature.

If you find this interface lacking, you may want to reconsider and opt for an alternative structure like:

export interface DynamicHashMap<T> {
  dynamicKey: string;
  dynamicValue: string;
  values: T[];
}

Answer 2

The correct definition of the interface is as follows

export interface DynamicHashMap<T> {
  [key: string]: string | T[];
  values: T[];
}

This design is chosen because the [key: string] signifies a universal signature for all keys, hence it is referred to as an index signature.

If you find this interface lacking, you may want to reconsider and opt for an alternative structure like:

export interface DynamicHashMap<T> {
  dynamicKey: string;
  dynamicValue: string;
  values: T[];
}

Answer 3

Answer №2

When I think of the term "dynamic", I often consider whether it refers to being determined only at runtime or having different values in various contexts despite being known at compile time. If it leans towards the former, then using broad types like the string-indexed concept you mentioned may be necessary. On the other hand, if it leans towards the latter, generics could sometimes be employed to specify a more specific type. For instance, in your scenario:

type DynamicHashMap<T, K extends keyof T> = Pick<T, K> & {values: T[]};

or

type DynamicHashMap<T, K extends keyof T> = { 
  [P in K | 'values']: P extends K ? T[K] : T[] 
};

is applicable to both T and the key K belonging to the T type. Through type inference, you can specify both T and K as follows:

// for instance
function makeDynamicHashMap<T, K extends keyof T>(
  key: K, 
  value: T[K], 
  values: T[]
): DynamicHashMap<T, K> {
  return { [key]: value, values: values.filter(v => v[key] === value) } as any;
}

const result = makeDynamicHashMap("group", "someGroupId", [user1, user2]);
result.group; // string
result.values; // User[]

In this case, result is identified as type

DynamicHashMap<User, "group">

. Hopefully, this explanation proves helpful. Best of luck!

Answer 4

When I think of the term "dynamic", I often consider whether it refers to being determined only at runtime or having different values in various contexts despite being known at compile time. If it leans towards the former, then using broad types like the string-indexed concept you mentioned may be necessary. On the other hand, if it leans towards the latter, generics could sometimes be employed to specify a more specific type. For instance, in your scenario:

type DynamicHashMap<T, K extends keyof T> = Pick<T, K> & {values: T[]};

or

type DynamicHashMap<T, K extends keyof T> = { 
  [P in K | 'values']: P extends K ? T[K] : T[] 
};

is applicable to both T and the key K belonging to the T type. Through type inference, you can specify both T and K as follows:

// for instance
function makeDynamicHashMap<T, K extends keyof T>(
  key: K, 
  value: T[K], 
  values: T[]
): DynamicHashMap<T, K> {
  return { [key]: value, values: values.filter(v => v[key] === value) } as any;
}

const result = makeDynamicHashMap("group", "someGroupId", [user1, user2]);
result.group; // string
result.values; // User[]

In this case, result is identified as type

DynamicHashMap<User, "group">

. Hopefully, this explanation proves helpful. Best of luck!

Creating a generic hashmap that can accept dynamic keys and an array of type T

Answer №1

Answer №2

Similar questions

Fast screening should enhance the quality of the filter options

Get every possible combination of a specified length without any repeated elements

Can you modify a specific column in a table using mat-table in Angular material?

The Concept of Static Block in TypeScript

Handling functions in Ant Design Select component with TypeScript types

In the Vercel production environment, when building Next.js getStaticPaths with URL parameters, the slashes are represented as %

Limiting the combinations of types in TypeScript

Update the component to display the latest information from the Bryntum grid table

What is preventing type-graphql from automatically determining the string type of a class property?

What is the best way to initiate a refetch when the need arises to follow a different path?

Exploring the Power of SectionList in Typescript

Extending Mongoose's capabilities with header files for the "plugin" feature, utilizing the .methods and .statics methods

Struggling with TypeScript compilation in a Vue.js project? Encounter error code TS2352

Utilize VueJS to upload and visualize a file input on your website

Loading components in an Angular CLI project with the base URL

Updating the data type of the Request object following the execution of the checkAuth middleware in Types

Troubles with Typescript typings when including an empty object in an array with specific typings

Is there a way to access the value of a public variable within the @input decorator of a function type?

Navigating through the Angular Upgrade Roadmap: Transitioning from 5.0 to 6

The never-ending cycle of an Angular dropdown linked to a function being repeatedly invoked