TypeScript map with number indexes

Question

I have split a circle to 8 regions and want to assign a swipe direction to each. How can I best represnt this?

so far I have this:

type RegionIndexToDirectionMap = { [index: number]: string };

const regionDirectionMap: RegionIndexToDirectionMap = {
    0: 'right',
    1: 'top_right',
    2: 'top',
    3: 'top_left',
    4: 'left',
    5: 'bottom_left',
    6: 'bottom',
    7: 'bottom_right',
};

type ValueOf<T> = T[keyof T];

export type SwipeDirection = ValueOf<typeof regionDirectionMap>;

The issue with this is that SwipeDirection has type 'string' while I need it to have 'right' | 'left' | ...

How can I achieve this without needing to repeat 'right', 'left' and other direction names?

jsejcksn · Accepted Answer · 2021-09-08 06:03:56Z

2

One approach is to build your map from existing data structure(s): in this case, an array of the direction strings:

TS Playground link

const directions = [
  'right',
  'top_right',
  'top',
  'top_left',
  'left',
  'bottom_left',
  'bottom',
  'bottom_right',
] as const;

const regionDirectionMap = Object.fromEntries(directions.map((direction, index) => [index, direction]));

export type SwipeDirection = typeof directions[number];

regionDirectionMap is of type { [k: string]: SwipeDirection }

answered Sep 8, 2021 at 6:03

jsejcksn

34.6k5 gold badges55 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hadi Over a year ago

great, thanks I ended up removing the regionDirectionMap and just used "directions" and "SwipeDirection"

jsejcksn Over a year ago

I don't know how the rest of your code works, but you might want to read about the reverse mapping feature of enums. This seems like it could be a good use case for an enum, depending on context.

Hadi Over a year ago

that didn't work actually, problem there is that if i say SwipeDirections[2] it returns a string instead of the enum type which is not what I want. Is this usage what you meant?

jsejcksn Over a year ago

I meant that it might be possible to refactor your code to use integer values instead of string literals for your directions if those specific strings aren't needed by some other API.

CertainPerformance · Accepted Answer · 2021-09-08 05:13:40Z

0

If you declare the object as const and omit the annotation of RegionIndexToDirectionMap, you can get the object values without widening to string.

const regionDirectionMap = {
    0: 'right',
    1: 'top_right',
    2: 'top',
    3: 'top_left',
    4: 'left',
    5: 'bottom_left',
    6: 'bottom',
    7: 'bottom_right',
} as const;

type ValueOf<T> = T[keyof T];

export type SwipeDirection = ValueOf<typeof regionDirectionMap>;

If you really need the more general { [index: number]: string } type but also don't want to repeat all the values, you can create another variable from the regionDirectionMap, but with the type annotation.

type RegionIndexToDirectionMap = { [index: number]: string };

const regionDirectionMap = {
    0: 'right',
    1: 'top_right',
    2: 'top',
    3: 'top_left',
    4: 'left',
    5: 'bottom_left',
    6: 'bottom',
    7: 'bottom_right',
} as const;

const regionDirectionMapGeneral: RegionIndexToDirectionMap = regionDirectionMap;

type ValueOf<T> = T[keyof T];

export type SwipeDirection = ValueOf<typeof regionDirectionMap>;

// proceed to use regionDirectionMapGeneral as needed

answered Sep 8, 2021 at 5:13

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

4 Comments

Hadi Over a year ago

I tried this, but the issue will then be that I can't access with a number index. When I know the region number i want to access it from the map like this: regionDirectionMap[regionIndex], but TS would then complain.

CertainPerformance Over a year ago

To be type-safe, you should be sure that the number is a valid one - make sure that it's a key of the object first. if (!(regionIndex in regionDirectionMap)) { throw new Error('Bad index'); } Then it should work

Hadi Over a year ago

hmm, makes sense to narrow it, but I added that and the narrowing doesn't work on it. After that regionIndex still has type of "number", any ideas?

Hadi Over a year ago

Ended up using the accepted solution, thanks for the guidance though

Collectives™ on Stack Overflow

TypeScript map with number indexes

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related