TypeScript 4.9: 만족 연산자

v4.9에서 TypeScript 팀은 새로운 연산자satisfies를 출시합니다(블로그 게시물https://devblogs.microsoft.com/typescript/announcing-typescript-4-9-beta/#the-satisfies-operator 참조).

목적

satisfies의 목적은 변수 유형을 변경하지 않고 변수에 제약 조건을 적용하는 것입니다.

예를 들어 색상이 "문자열 또는 RGB 튜플"이라고 말하면 다음과 같이 표시됩니다.

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

const myColor: Color = 'red';

그러나 이제 myColor가 문자열인지 튜플인지 알 수 없습니다. 따라서 myColor.toUpperCase()와 같은 작업을 수행할 수 없습니다(실제로 문자열인 경우에도).

TS 4.9에서는 다음과 같이 할 수 있습니다( TypeScript Playground ).

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

const myColor = 'red' satisfies Color; // works
const myIncorrectColor = 100 satisfies Color; // throws error

myColor.toUpperCase(); // valid operation as myColor is a string

const와 satisfies로 결합

예상대로 as const 및 satisfies ( TypeScript Playground )을 결합합니다.

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

const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [1,2,3],
} satisfies Record<string, Color>;

console.log(palette.green);
//                   ^? green is string


const constantPalette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [1,2,3],
} as const satisfies Record<string, Color>;

console.log(constantPalette.green);
//                          ^? green is "#00ff00"

참고: 순서가 중요합니다. as const satisfies <type>는 작동하지만 그 반대는 사실이 아닙니다. satisfies <type> as const는 TS 오류( TypeScript Playground )를 발생시킵니다.

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

const invalidPalette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [1,2,3],
} satisfies Record<string, string | RGB> as const; // throws an error