Typescript satisfies Operator는 무엇일까?

Typescrip 4.9에서 Satisfies Operator가 추가되었다. 존재 자체를 모르고 있다가 Storybook 7.0 에서는 Satisfies를 사용하도록 권장하고 있어서 알게되었습니다. 간단히 Satisfies를 알아보고 Storybook 7.0에서 어떻게 적용했는지 설명하겠습니다.

Satisfies

아래와 같은 타입이 있습니다.

type Colors = 'red' | 'green' | 'blue'
type RGB = [red: number, green: number, blue: number]
type ColorMap = Record<Colors, string | RGB>

이제 ColorMap 타입을 만족하는 객체를 만든다고 가정해보겠습니다. 우선 두가지 방법으로 작성할 수 있겠는데요.

// 1. as 타입 단언
const palette1 = {
  red: [255, 0, 0],
  green: '#00ff00',
  blue: [0, 0, 255],
} as ColorMap

// 2. ColorMap으로 타입 선언
const palette2: ColorMap = {
  red: [255, 0, 0],
  green: '#00ff00',
  blue: [0, 0, 255],
}

참고: 1.보다는 2.를 사용해서 객체리터럴을 생성하는게 더 좋습니다. 타입 선언을 사용하면 타입시스템에서 잉여속성 체크를 수행하기 때문입니다.

타입스크립트는 palette1.red와 palette2.red의 타입을 무엇으로 추론할까요?

정답은 둘다 string | RGB입니다.

하지만 보통 좀 더 구체적으로 타입을 추론하길 원합니다. 이때 보통 as const를 사용할 수 있겠는데요.

// 3. as const로 생성
const palette1 = {
  red: [255, 0, 0],
  green: '#00ff00',
  blue: [0, 0, 255],
} as ColorMap

palette.red는 [0, 0, 255]로 추론됩니다. 하지만 또 문제가 있습니다 🤔 만약 인자로 ColorMap 타입이 와야하는 함수가 있다면 타입 에러가 발생합니다.

이 때 Satisfies를 사용해서 해결할 수 있습니다.

// 4. satisfies로 선언
const palette2 = {
  red: [255, 0, 0],
  green: '#00ff00',
  blue: [0, 0, 255],
} satisfies ColorMap

as const 보다는 느슨하게 추론을 해줍니다. 타입 선언과 마찬가지로 잉여속성 체크를 수행합니다.

Storybook satisfies

storybook에서는 args를 지정할 수 있는데요. storybook 6에서는 필수 인수가 누락되는 것에 대한 경고는 제공하지 않았습니다. 하지만 storybook 7부터는 필수 인수가 누락되면 경고를 제공합니다.

아래는 storybook6와 storybook7에서 스토리북 파일을 작성한 예시입니다.

storybook6에서는 type-safe를 위해 컴포넌트의 Props Type을 import했지만 storybook7에서는 satisfies 때문에 이를 import하지 않고도 type-safe를 유지할 수 있습니다.

마치며

이제 타입 선언보다는 satisfies연산자를 이용하는 것이 좋아보입니다. 잉여속성 체크는 물론 정확한 타입 체킹도 해주니까요. 여담으로 typescript는 Semver를 따라가지 않는다고 하네요. 그러니까 최신을 해도 괜