Satisfies란?

  • 9/12/2025
  • One-minute read

수정

Satisfies 는 왜 필요한가?

const palette: Record<'red' | 'green' | 'blue', [number, number, number] | string> = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255], 
};
  • 레코드로 타입을 정확하게 지정해줬기 때문에, 객체 내부 값을 초기화할 떄에는 문제가 발생하지 않는다.
const greenNormalized = palette.green.toUpperCase(); // property toUpperCase does not exist on type [number, number, number]
  • 하지만 문제가 발생하는 것은 이 부분이다.
  • palette에서 value 값이 string | [number,number,number]로 잡혀있기 때문이다.
  • 따라서 이런 경우에 toUpperCase 메서드를 실행하기 위해 값이 문자열이어야 하지만, typescript 에서는 value값이 string인지, [number,number,number] 인지 제대로 구분하지 못한다.
const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255],
} satisfies Record<'red' | 'green' | 'blue', [number, number, number] | string>;

const greenNormalized = palette.green.toUpperCase();
// 이후 upperCase 메서드도 정상적으로 실행됨을 확인할 수 있다.
  • 따라서 다음과 같은 패턴이 권장된다.
  • satisfies 연산자를 활용해서 palette 객체 내부의 각각의 요소들은 Record 타입을 선언한 것을 바탕으로 한번 더 타입검사가 된다.

결론

=> 결과적으로 Satisfies는 TS에서 타입 추론을 할 떄 놓치는 부분을 한 번 더 잡아주는 기능을 하는 연산자라고 볼 수 있다. => Satisfies를 활용하면, as를 활용할 때보다 더 Type safe하게 코드를 작성할 수 있다.

JS & TS