Discussion on: TypeScript 4.9: satisfies operator

[dc]

type RGB = readonly [red: number, green: number, blue: number];

why is readonly used in this instance?
what actually is the result type? an array of strings or some type of enum? eg
["red": 1, "green": 2]

could you explain more why:

type RGB = readonly [red: number, green: number, blue: number];
type Color = RGB | string;
const myColor = 'red' satisfies Color; // works
myColor.toUpperCase(); // valid operation as myColor is a string

so if myColor can be a string OR an RGB, how is it always going to work with the .toUpperCase ? Would that not fail on the tuple type of RGB?

[Ayc0]

what actually is the result type? an array of strings or some type of enum? eg
["red": 1, "green": 2]

It'd be a tuple of 3 numbers, something like:

const myColor = [120, 255, 10];

Adding readonly will only tell TS that you cannot push / mutate its content. And the red, green, blue is just to gave labels to the 3 values (hints on the values).
See devblogs.microsoft.com/typescript/...

[Ayc0]

why is readonly used in this instance?

It's used because using as const on an array creates a readonly tuple. So I had to use it to make the 2 types compatible.

so if myColor can be a string OR an RGB

That's the point of satisfies: it won't be a string or a RGB: when you do const myColor = 'red', myColor will have the type string.
Adding satisfies Color doesn't change its type, but instead checks that it can be casted into a Color. And indeed, string can be casted (but won't be casted) as a RGB | string.

So as myColor stays a string, TS won't throw an error on myColor.toUpperCase()

[Eric]

But hypothetically, then, you have an RGB type which satisfies the requirements for the Color type; what actually happens when you try to run .toUpperCase()?

At the end of the day, type Color = RGB | string is really just saying that anything stored as a Color should either be a RGB or a string. And, using satisfies is supposed to put us in a position where we can be confident that it's safe to use string methods or methods specific to a readonly array (RGB) should work or have some standard behavior across all Color instances. I don't really understand how that works or how that's supposed to be handled.

[Ayc0]

what actually happens when you try to run .toUpperCase()?

As the types are stripped away in the runtime, it'd be regular JS:

type RGB = readonly [red: number, green: number, blue: number];
type Color = { value: RGB | string };

const myColor = { value: 'red' } satisfies Color;
myColor.value.toUpperCase();

becomes

const myColor = { value: 'red' };
myColor.value.toUpperCase();

so it'd just apply toUpperCase() to 'red', returning 'RED'.

I don't really understand how that works or how that's supposed to be handled.

satisfies doesn't change the type of myColor. It just checks that the type of the variable can be assimilated as another one. You can think about it as:

type RGB = readonly [red: number, green: number, blue: number];
type Color = { value: RGB | string };

const myColor = { value: 'red' };
const validatedMyColor: Color = myColor;
// ^ this variable isn't used, its only purpose is
// to check that `myColor` is assignable as a `Color` variable.
// But it doesn't change the fact that `myColor.value` is a string,
// and not `string | RGB`.
myColor.value.toUpperCase();