I'm trying to learn Typescript with React, but this error got in my way. I don't understand why is it even happening. Here it is. Creating an array of strings that looks like colors array down there. I want to create types based on values of that array ("white" | "red" | "blue").

const colors = ["white", "red", "blue"] as const;
type Colors= typeof colors[number];

If I do it like this, it works, Colors has wanted types

const colorsArr = ["white", "red", "blue"];
const colors = colorsArr as const
type Colors = typeof colors[number]

But if I do it like this, it doesnt, and I'm getting "const" assertion error.

It doesn't even work if I copy colors array like [...colorsArr] or colorsArr.slice()

How does that work?

I'm trying to learn Typescript with React, but this error got in my way. I don't understand why is it even happening. Here it is. Creating an array of strings that looks like colors array down there. I want to create types based on values of that array ("white" | "red" | "blue").

const colors = ["white", "red", "blue"] as const;
type Colors= typeof colors[number];

If I do it like this, it works, Colors has wanted types

const colorsArr = ["white", "red", "blue"];
const colors = colorsArr as const
type Colors = typeof colors[number]

But if I do it like this, it doesnt, and I'm getting "const" assertion error.

It doesn't even work if I copy colors array like [...colorsArr] or colorsArr.slice()

How does that work?

• javascript
• reactjs
• typescript
• typescript-typings

• 1 Are you trying to reinvent enum? – epascarello Commented Jul 8, 2022 at 17:23
• 2 I think the error message is pretty descriptive. A 'const' assertions can only be applied to references to enum members, or string, number, boolean, array, or object literals.. I am also not sure what you expect to happen. The as const operator is used to narrow down literal types. colorsArr is a variable of type string[] and the type information about specific elements is already lost at that point. – Tobias S. Commented Jul 8, 2022 at 17:24
• 1 This is a known caveat with const assertions. It only makes sense with literals because that's the only chance you have to preserve their strong types. const x = [0] as const says "don't throw away the details of the array". But const x = [0] infers x as number[], and after that x as const is useless, like asking someone not to throw away last week's trash. It's already gone. – jcalz Commented Jul 8, 2022 at 18:59

1 Answer 1

A const assertion is used with object/array/string/numeric literal values, to tell the piler to preserve a more specific type for these values. It cannot be applied to arbitrary expressions like another variable; this is a documented caveat.

If you write

const colors = ["white", "red", "blue"] as const;

then the piler infers the type readonly ["white", "red", "blue"] for colors. The piler knows the value and position of each member of that array, and it won't let you change any of that.

On the other hand, if you leave off as const,

const colors = ["white", "red", "blue"];

then the piler infers string[] for colors. It's just an array of strings of unknown quantity, value, or order. That's often what people want, since maybe you'd like to write colors.push("purple"). But the piler has pletely forgotten about the specific string literals in colors and what their order was. That information is gone.

You can't write

const colors2 = colors as const; // error

and have it do anything. Even if there weren't a piler error, it still wouldn't have any useful effect. The type of colors is string[]. Writing colors as const can't retrieve the type information that was thrown away earlier. That information is gone. At best you'd get that colors2 is also string[].

Playground link to code

type Colors= typeof colors[number];