A "const" assertion error typescript with string array

Question

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 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.
– Tobias S., Commented Jul 8, 2022 at 17:24
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
– jcalz, Commented Jul 8, 2022 at 18:59

jcalz · Accepted Answer · 2022-07-08 19:22:47Z

7

A const assertion is used with object/array/string/numeric literal values, to tell the compiler 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 compiler infers the type readonly ["white", "red", "blue"] for colors. The compiler 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 compiler 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 compiler has completely 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 compiler 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];

answered Jul 8, 2022 at 19:22

jcalz

339k29 gold badges452 silver badges449 bronze badges

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

1 Comment

user16599034 Over a year ago

Tyvm. Now I have better understanding on whats going on and it totally makes sense. Very well explained.

Collectives™ on Stack Overflow

A "const" assertion error typescript with string array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related