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?

Answer 1

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];