30

In Typescript, it is possible to create record types with string enums:

enum AxisLabel { X = "X", Y = "Y" }
export const labelLookup: Record<AxisLabel, string> = {
  [AxisLabel.X]: "X axis",
  [AxisLabel.Y]: "Y Axis"
};

I need to create a Record object similar to the one above, but I do not wish to use a string enum.

When I try something like this:

enum AxisLabel { X, Y }
export const labelLookup: Record<AxisLabel, string> = {
  [AxisLabel.X]: "X axis",
  [AxisLabel.Y]: "Y Axis"
};

Typescript produces the following error:

Type 'AxisLabel' does not satisfy the constraint 'string'.

It is possible to create JS objects with both numbers and strings as their member names.

I wish to do the same in Typescript, but without resorting to unsafe coercion or type casts. How do I do create numeric enum Record<> types in Typescript without using string enums, any or type casts?

2
  • Should be noted that you must use ALL of the enum values in your record when used like this. Couldn't understand what my error was when I just did export const labelLookup: Record<AxisLabel, string> = { [AxisLabel.X]: 'X axis' }
    – stuhops
    Oct 5, 2022 at 19:43
  • @stuhops I also stumbled upon this, it works when using Partial: export const labelLookup: Partial<Record<AxisLabel, string>> = { [AxisLabel.X]: 'X axis' } Oct 26, 2022 at 11:17

3 Answers 3

25

UPDATE: TypeScript 2.9 added support for number and symbol as valid key types, thus the code above no longer gives an error, and this answer is no longer necessary, as long as you're using TypeScript 2.9 or above.

For TypeScript 2.8 and below:


Object keys in JavaScript are, believe it or not, always strings (okay, or Symbols), even for arrays. When you pass a non-string value as a key, it gets coerced into a string first. But of course people expect numeric keys to make sense, especially for arrays. TypeScript kind of reflects this inconsistent philosophy: usually you can only specify string-valued keys (such as in mapped types like Record<K,V>). When those situations interact you get weirdness.

Here's one thing I've sometimes done: explicitly represent the coercion from number to string with the following tuple type:

export type NumericStrings = ["0","1","2","3","4","5","6","7","8","9","10"] // etc

Note that you can extend that as long as you need it. Then, you can use lookup types to convert a numeric type to its string counterpart for use in mapped types. Like so:

export enum AxisLabel { X, Y }

// note the key is NumericStrings[AxisLabel], not AxisLabel    
export const labelLookup: Record<NumericStrings[AxisLabel], string> = {
  [AxisLabel.X]: "X axis",
  [AxisLabel.Y]: "Y Axis"
};

That works without error. If you inspect the type of labelLookup, it shows up as Record<"0" | "1", string>. When you try to index into labelLookup, the following mostly-expected things happen:

labelLookup[AxisLabel.X]; // okay
labelLookup[0]; // okay
labelLookup["0"]; // also okay

labelLookup[10]; // error
labelLookup.X; //error

Hope that helps; good luck!

6

The definition of record is very specific that the key must be assignable to string, so there is no way to use Record with a number, more generally the key in a mapped type must be a string.

You can use a regular index signature, but it you cannot restrict an index signature to anything but string or number (according to the language spec) which means that any number would be valid not just the enum values:

export const labelLookup: { [index: number]: string } = {
    [AxisLabel.X]: "X axis",
    [AxisLabel.Y]: "Y Axis",
    [3] = "" // Also works but you don't want that
};
3

Another way to use enum as part of Record

enum AxisLabel { X, Y }
export const labelLookup: Record<AxisLabel[keyof AxisLabel & number], string> = {
  [AxisLabel.X]: "X axis",
  [AxisLabel.Y]: "Y Axis"
}

OR

enum AxisLabel { X, Y }
type XorY = typeof AxisLabel.X | typeof AxisLabel.Y
export const labelLookup: Record<XorY, string> = {
  [AxisLabel.X]: "X axis",
  [AxisLabel.Y]: "Y Axis"
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.