안녕하세요! 오늘은 타입스크립트 4.9 버전에서 추가된 satisfies 키워드에 대해서 알아보도록 하겠습니다. 😀

1. satisfies를 사용하기 전

일반적으로 객체의 값이 유니온타입 형태이고, 타입이 지정된 객체가 있다고 가정할때 아래처럼 사용한다.

type Colors = 'red' | 'blue' | 'yellow';

type Color = Record<Colors, string | string[]>;

const color: Color = {
  red: '100, 100, 100',
  blue: ['125', '125', '125'],
  yellow: ['150', '150', '150'],
};

color.red.charAt(5); // charAt 메소드 사용 시도, 실패

이 상태에서, color.red의 값에 charAt 메소드를 적용시키려고 한다. 언뜻 보기에는 문제가 없는것 같으나, 실제로는 문제가 생긴다.

Property 'charAt' does not exist on type 'string | string[]'

만약 객체의 타입을 지정하지 않은 형태의 객체는 각 프로퍼티별 타입 값이 명시가 되기에 문제가 생기지 않지만, 오타 방지등의 이유로 객체의 타입을 유니온타입과 함께 위와 같이 선언했을경우 문제가 생긴다.

satisfies 키워드가 나오기 전에는 as 키워드를 통해서 문제를 해결할 수 있었다.

const color: Color = {
  red: '100, 100, 100',
  blue: ['125', '125', '125'],
  yellow: ['150', '150', '150'],
};

(color.red as string).charAt(5); // charAt 메소드 사용 시도, 성공

그러나 사용과정에서 위와같은 타입추론의 과정없이 선언 단계에서 이를 해결할 수 있다면 어떨까?

2. satisfies가 나온 후

타입스크립트 4.9 버전에 추가된 satisfies 키워드를 사용하면 위와같은 문제를 선언 단계에서 해결할 수 있다.

type Colors = 'red' | 'blue' | 'yellow';

type Color = Record<Colors, string | string[]>;

const color = {
  red: '100, 100, 100',
  blue: ['125', '125', '125'],
  yellow: ['150', '150', '150'],
} satisfies Color;

이렇게 해주면 color 객체의 각 프로퍼티 값들이 어느 타입에 해당하는지 명시를 해준다.

위의 예제에서 satisfies 연산자는 value 타입이 유니온타입일때, 각 프로퍼티의 타입들이 어느 유니온 타입에 해당되는지를 검사하여 호환되는 타입을 연결해준다.

3. 마치며 ⏰

몇달전에 타입스크립트의 satisfies 키워드에 대해서 정리를 해두고, 재복습할겸 블로그에 다시 올려보니 괜찮은거 같다. 예전에 정리해둔 공부 문서에서 블로그에 올릴만한 내용들이 있다면 가끔씩 올려야겠다.

혹시나 글에서 잘못된 부분이 있다면, 피드백 주시면 감사드리겠습니다! 😀 이상으로 글을 마치도록 하겠습니다. 감사합니다.