Ensuring Map Safety in Typescript

Question

Ensuring Map Safety in Typescript

Imagine having a Map structure like the one found in file CategoryMap.ts

export default new Map<number, SubCategory[]>([
   [11, [100, 101]],
   [12, [102, 103]],
   ...
])

Is there a way to create a type guard for this Map?

import categoryMap from 'CategoryMap'

type CategoryMapId = keyof typeof categoryMap

function isCategoryId(id: number): id is CategoryMapId {
   return categoryMap.has(id)
}

The issue here is that CategoryMapId appears as

"[Symbol.toStringTag]" | "clear" | "delete" | "forEach" | "get" | "has" | "set" | "size" | "[Symbol.iterator]" | "entries" | "keys" | ...

What I would like is for the type CategoryMapId to be 11 | 12 ...

Any ideas on how to solve this? Thanks.

javascript typescript

Answer 1

Answer №1

To designate a type for the 'key' of the map, you can do the following:

const exampleMap = new Map<11 | 12, [number, number]>([
  [11, [100, 101]],
  [12, [102, 103]],
]);

const y = exampleMap.get(11); // works
const x = exampleMap.get(13); // type error

If you wish TypeScript to infer this at runtime, there is a workaround suggested in this response:

type KeyOfCustomMap<M extends Map<unknown, unknown>> = M extends Map<infer K, unknown> ? K : never

const customMap = new Map<number, [number, number]>([
  [11, [100, 101]],
  [12, [102, 103]],
]);

type CustomMapKey = KeyOfCustomMap<typeof customMap>;

const isCustomKeyId = (id: number): id is CustomMapKey =>
  customMap.has(id);

In this scenario, CustomMapKey is still assigned the type number, which may not be ideal.

If you opt for using an object instead of a Map, it allows for obtaining proper key types:

const newObjMap = {
  11: [100, 101],
  12: [102, 103],
}
type CustomMapKey = keyof typeof newObjMap;

const isCustomKeyId = (id: number): id is CustomMapKey =>
  Object.keys(newObjMap).map(Number).indexOf(id) > -1;

const x = isCustomKeyId(11); // true
const y = isCustomKeyId(13); // false

const getValue = (id: number) => {
  if (isCustomKeyId(id)) {
    return newObjMap[id];
  } else {
    return [];
  }
}

This approach might not align with your specific requirements, as it appears challenging to achieve with Maps currently.

Answer 2

To designate a type for the 'key' of the map, you can do the following:

const exampleMap = new Map<11 | 12, [number, number]>([
  [11, [100, 101]],
  [12, [102, 103]],
]);

const y = exampleMap.get(11); // works
const x = exampleMap.get(13); // type error

If you wish TypeScript to infer this at runtime, there is a workaround suggested in this response:

type KeyOfCustomMap<M extends Map<unknown, unknown>> = M extends Map<infer K, unknown> ? K : never

const customMap = new Map<number, [number, number]>([
  [11, [100, 101]],
  [12, [102, 103]],
]);

type CustomMapKey = KeyOfCustomMap<typeof customMap>;

const isCustomKeyId = (id: number): id is CustomMapKey =>
  customMap.has(id);

In this scenario, CustomMapKey is still assigned the type number, which may not be ideal.

If you opt for using an object instead of a Map, it allows for obtaining proper key types:

const newObjMap = {
  11: [100, 101],
  12: [102, 103],
}
type CustomMapKey = keyof typeof newObjMap;

const isCustomKeyId = (id: number): id is CustomMapKey =>
  Object.keys(newObjMap).map(Number).indexOf(id) > -1;

const x = isCustomKeyId(11); // true
const y = isCustomKeyId(13); // false

const getValue = (id: number) => {
  if (isCustomKeyId(id)) {
    return newObjMap[id];
  } else {
    return [];
  }
}

This approach might not align with your specific requirements, as it appears challenging to achieve with Maps currently.

Ensuring Map Safety in Typescript

Answer №1

Similar questions

Accessing form data within Mongoose schema hooks via JavaScript

Should objects passed as props be modified in Vue.js components?

Methods for adding a line to an array

Checking validation with parsley.js without triggering form submission

What is the best way to initiate a Bootstrap carousel so that it begins with the first image every time a modal window appears

Navigate between pictures using hover in jQuery

Having trouble with collision detection in Three.js?

Using JQUERY to execute a callback function after an AJAX request is completed

Customize the appearance of disabled dates in the eonasdan-datetimepicker styling

Using the map function with a React onClick handler

The ng-repeat function is failing to show any data on the HTML view, instead only displaying a row for each property present

Utilizing Angular 2 for a dynamic Google Map experience with numerous markers

The responseText array is encountering parsing issues

React is running smoothly, however, when attempting to call the React flow, an error is encountered: "Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not

Using AJAX and PHP to dynamically fill HTML drop-down menus

Deactivate JQuery star rating plugin after user has voted

After successfully executing an AJAX request three times, it encountered a failure

What is the best way to turn each function within the module pattern into a promise?

How selection.join behaves when every node contains child elements

Adjusting the opacity of the background image in the section - focus solely on the background