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?
CodePudding user response：
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[].
type Colors= typeof colors[number];