타입스크립트 satisfies 키워드에 대해 설명해주세요.
분야: 프론트엔드
satisfies 키워드는 기존 타입 정보를 유지하면서 해당 값이 특정 타입 조건을 충족하는지 확인할 때 사용됩니다.
예를 들어, satisfies는 유니온 타입을 다룰 때 이점이 있습니다. 구체적인 코드를 통해 설명을 드리면 좋을 것 같습니다.
type Color = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];
const palette: Record<Color, string | RGB> = {
red: [255, 0, 0],
green: "#00ff00",
blue: [0, 0, 255]
};
// ⚠️ 오류 발생
const greenNormalized = palette.green.toUpperCase();
위 코드에서 palette.green의 타입은 string | RGB로 변환 추론되기 때문에 .toUpperCase() 호출 시 타입 에러가 발생합니다.
const palette = {
red: [255, 0, 0],
green: "#00ff00",
blue: [0, 0, 255]
} satisfies Record<Color, string | RGB>;
// ✅ 정상 동작
const greenNormalized = palette.green.toUpperCase();
하지만 위와 같이 satisfies를 활용하면 palette.green의 타입이 string으로 추론되어 .toUpperCase()를 정상적으로 호출할 수 있습니다.
즉, satisfies를 사용하면, 의도보다 더 넓은 타입으로 추론되는 일을 방지하며 타입 검사를 수행할 수 있습니다.
어떤 상황에서 satisfies를 활용해야 할까요? 🤔
satisfies는 유니온 타입의 타입 체크가 필요할 때 유용합니다. 또는, 객체 리터럴이 필수적인 타입을 만족해야 하고, 동시에 추가적인 필드가 존재할 수 있는 경우에도 유용하게 활용될 수 있습니다.