[TS] 개발자처럼 사용하기 8 : satisfies

satisfies 키워드를 본 적이 있으신가요?

타입스크립트를 사용하다 보면 satisfies라는 키워드를 접하게 될 수 있습니다. 많은 개발자들은 이 키워드를 사용하지 않고도 타입을 지정하는 데에 별다른 문제가 없다고 느낄 수 있습니다. 하지만 이 키워드가 왜 도입되었고, 어떤 이점을 제공하는지 살펴보는 것이 중요합니다.

스토리북을 작성해보신 경험이 있으신가요?

스토리북은 컴포넌트를 시각적으로 관리하고, 디자이너나 개발자에게 실제 컴포넌트의 생김새를 보여주는 도구입니다.

스토리북에 대해서 설명하는 글이 아니기 때문에 자세한 설명은 생략합니다.

해당 스토리북을 다음과 같은 명령어를 사용하여 설치를 할 수 있습니다.

npx storybook init

설치 후, 다음과 같은 예시 파일을 볼 수 있습니다:

이 예시에서 satisfies 키워드가 사용됩니다. 이는 타입스크립트 4.9 버전에서 도입된 키워드로, 이전에는 다음과 같은 코드로 작성되었습니다:

satisfies가 개발을 하면서 사용하는 패키지 내에서 많이 사용이 되겠지만 node_modules내에 작성이 되었을 것이고, 사용자에게 예시 파일로 접할 수 있는 경우는 스토리북을 통한 경험이 있었습니다.

satisfies 키워드는 4.9 버전에서 출시된 키워드로 출시가 되기전 스토리북의 stories.* 파일의 생김새는 다음과 같습니다.

const meta: Meta<typeof Button> = {
  component: Button,
};
                 
type Story = StoryObj<typeof meta>;

새로운 코드와 이전 코드의 차이점은 satisfies를 통해 타입을 명시하는 방식이 변경된 것입니다. 마치 as와 비슷하게 보일 수 있지만, satisfies는 타입 단언이 아니라 더 엄격한 타입 검사를 위해 사용됩니다.

스토리북 문서에서도 satisfies를 사용해 타입 안전성을 강화할 것을 권장합니다 (원문)

TypeScript 4.9 이상을 사용한다면, satisfies 연산자를 활용해 더 엄격한 타입 검사를 받을 수 있습니다. 이제 잘못된 인자뿐만 아니라, 필수 인자가 누락된 경우에도 타입 오류가 발생합니다.

Satisfies를 사용해 스토리의 타입을 적용하면 여러 스토리 간에 play 함수를 공유할 때 타입 안전성을 유지할 수 있습니다. 이를 사용하지 않으면 TypeScript는 play 함수가 정의되지 않았을 수 있다는 오류를 던집니다. 하지만 satisfies 연산자를 사용하면 TypeScript가 play 함수가 정의되었는지 여부를 추론할 수 있습니다.

마지막으로, satisfies를 사용하면 typeof meta를 StoryObj 제네릭에 전달할 수 있습니다. 이렇게 하면 TypeScript는 meta와 StoryObj 타입 간의 연결을 인식하게 되고, args 타입을 meta 타입에서 추론할 수 있습니다. 즉, meta 레벨에서 필수 인자가 정의되었지만 스토리 레벨에서 정의되지 않은 경우에도 오류를 발생시키지 않게 됩니다.

이 문구를 통해 알 수 있는 것은 satisfies가 단순히 타입을 확인하는 것이 아니라, 더 엄격한 타입 검사를 통해 잠재적인 오류를 사전에 방지할 수 있다는 점입니다.

satisfies를 사용한 예시

간단한 Post 구현을 예로 들어보겠습니다.

위 그림에서, 선언된 주소 타입과 달리 split() 메소드를 사용할 수 없습니다. 이는 타입이 string | string[]으로 추론되기 때문입니다.

하지만 satisfies를 사용하면 타입을 더 엄격하게 검사하여, 해당 타입이 무엇인지 명확히 알 수 있습니다.

위 코드에서는 satisfies를 사용해 타입이 명확히 string임을 확인할 수 있고, 이로 인해 split() 메소드를 안전하게 사용할 수 있습니다.

또 다른 예시를 보겠습니다.

위 코드에서는 satisfies를 사용해 타입이 명확히 string인지 string[]인지를 확인할 수 있고, 이로 인해 각각 다른 타입의 메소드들을 사용할 수 있습니다.

또 다른 예시를 보겠습니다.

여기서 satisfies를 사용한 경우와 사용하지 않은 경우의 차이를 확인할 수 있습니다. satisfies를 사용하면 타입에 정의된 값 이외의 값이 전달되는 경우 오류가 발생합니다. 이는 단순히 타입을 적용하는 것만으로는 발견할 수 없는 오류를 예방하는 데 도움이 됩니다.

결론적으로, satisfies 키워드를 사용하면 코드 작성 단계에서 더 엄격한 타입 검사를 통해 잠재적인 오류를 방지할 수 있습니다. 이는 특히 스토리북과 같은 툴에서 play 함수가 정의되었는지 여부를 정확히 확인하는 데 유용합니다.

결론

결론적으로, satisfies 키워드를 사용하면 다음과 같은 이점을 얻을 수 있습니다.

• 더 엄격한 타입 검사: satisfies는 객체가 특정 타입의 조건을 완전히 만족하도록 강제합니다. 이를 통해, 정의되지 않은 속성의 추가나 누락된 필수 속성 등을 타입 수준에서 사전에 방지할 수 있습니다.

• 타입 안전성 강화: satisfies를 사용하면, 타입스크립트가 객체의 정확한 타입을 추론할 수 있도록 도와줍니다. 이로 인해 메소드 호출 시 잘못된 타입이 사용될 가능성을 줄이고, 코드의 안전성을 높입니다.

• 유연한 타입 제어: satisfies는 as와 달리, 타입을 강제하는 동시에 유연성을 유지합니다. 즉, 코드에서 의도하지 않은 오류를 막으면서도, 특정 타입 구조 내에서만 동작하도록 제어할 수 있습니다.

따라서, satisfies 키워드를 사용하면 코드의 가독성과 안정성을 높이는 동시에, 유지보수 과정에서 발생할 수 있는 잠재적인 오류를 미리 방지할 수 있습니다.