[Typescript] Typescript satisfies

 

개요

2년전, 타입스크립트를 처음에 접할땐 interface , type 키워드만알아도 거의 개발하는데 무방했지만, 실무에서 타입스크립트와 리액트로
개발하다보면 TS의 Util을 활용을 하면 훨씬 더 편하고, 확장성 좋은 강력한 type safe 기능을 발휘 할 수 있습니다.
그래서 작년에 TS의 Util 관련하여 블로그 포스팅한게 있습니다. 지금도 헷갈리거나 기억이 안날때 가끔 제가 쓴
블로그 보면서 참고하는데요.
 
이번엔 타입스크립트의 "satisfies" 키워드를 포스팅 해보겠습니다.
TS를 극한으로 쓰시는분들이 아니면 이 키워드는 생소(?) 할것같은데요. (저는 그랬습니다.)
 

satisfies 키워드가 무엇이고 언제 쓰이면 유용할까요?

일단 개인적으로 저는 타입스크립트의 Type safe역할도 그렇지만, 미리 Interface 나 type을 작성하고 타입 지정을 해주면 제가 작성해놓은 type에 맞게끔 자동완성 기능을 정말 애용하는 편입니다.
그리고 또한 그 타입의 맞는 method 또한 자동으로 완성되죠. 아래의 예시를 보면서 satisfies를 적용하고나서와 하기전을 비교해보겠습니다.
 
TypeScript의 satisfies 키워드는 TypeScript 4.9에서 도입된 새로운 기능으로, 주로 타입 체크를 강화하고 코드의 의도를 명확히 하기 위해 사용됩니다. 이 키워드는 특정 변수가 특정 타입을 '만족(satisfy)'하는지를 확인하는 데 사용됩니다. 기본개념 variable satisfies Type 구문을 사용하면, variable이 Type의 모든 요구 사항을 충족하는지 확인할 수 있습니다. 이는 주로 다음 두 가지 상황에서 유용합니다:
 
1. 타입 가드: 변수가 특정 타입을 만족하는지를 런타임에 확인합니다.
2. 타입 정제: 특정 조건에서 변수의 타입을 더 구체적인 서브타입으로 좁혀 나갑니다.
 
 
 

Example.1 atisfies 적용전

type ProfileType = {
  name:string;
  age:string | number;
}

const profile:ProfileType = {
  name:'kwangmin',
  age:30
}

 
위 예시는 전혀 문제가없습니다.
 
age 쪽을 보면 string과 number 유니온 타입을 받는데요. 아래의 이미지를 보면 profile의 name은 string의 하나의 타입을 가집니다.
그래서 profile 객체의 name의 키값에 접근할때는 string method를 자동완성으로 보여주고있습니다.
하지만 유니온 타입은 age의 접근할때는 number의 method를 제대로 불러오질 못하고있습니다.
 
반대로 age를 string의 값인 "30"으로 바꾼다고 해도 똑같이 method 자동완성을 제대로 못하고있습니다.

 
 

Example.1 satisfies 적용후

type ProfileType = {
  name:string;
  age:string | number;
}

const profile = {
  name:'kwangmin',
  age:30
} satisfies ProfileType

 
satisfies 키워드를 선언하면 사용하는 타입의 따라 모든 메소드를 자동완성 해주고있습니다. 간단하죠?
 
 

Example 2. 

const profile:Record<string,number> = {};

profile.any = 10;
profile.any2 = 20;

 
scores의 객체의 키값이 string인 와이드한 타입이기때문에 선언이 되어있지도 않는 any, any2의 접근을 해도 타입에러를 내뱉지 않습니다. 만약 객체의 키값도 자동완성 기능과 타입 체크를 원한다면 여기서도 satisfies를 사용 할 수 있습니다.
 
사실 satisfies 를 사용 하지않고도 아래처럼 키값을 정해줄 수 도있습니다. 이런식으로 해도 타입가드 역할을 할 수있습니다.
오히려 아래는 키 name값을 직접 미리 타입으로 선언해줄수있어서 아래의 방법도 괜찮습니다.

type Key = 'name' | 'age'

const profile:Record<Key,number> = {};

 
 
profile2의 키값 자동완성은 완성될수없습니다. 왜냐하면 키값을 그저 string의 타입을 갖고오기때문이죠.
 

 
as 와 satisfies 차이

 

as

as 키워드 as 키워드는 타입 단언(type assertion)에 사용됩니다. 이는 개발자가 TypeScript 컴파일러에게 "이 변수를 내가 지정한 타입으로 처리해 달라"고 요청하는 것과 같습니다. 컴파일러는 이 단언을 신뢰하고 해당 타입에 맞게 코드를 처리합니다. 하지만 실제 런타임에서 변수의 타입이 단언한 타입과 다를 경우에도 TypeScript는 이를 감지하지 못하고, 오류가 발생할 수 있습니다. 즉, as 키워드는 컴파일 시간에만 영향을 미치며 런타임 타입 검사는 하지 않습니다. 

 

 

satisfies

반면, satisfies 키워드는 주로 개발 중 타입의 호환성을 검사하기 위해 사용됩니다. satisfies는 변수가 특정 타입을 "만족하는지(satisfies)" 검사하고, 만족하지 않으면 컴파일 시점에 오류를 발생시킵니다. 이는 타입 안정성을 강화하고, 코드가 명시된 타입 계약을 정확히 준수하도록 보장합니다. satisfies는 타입 단언과 달리 런타임에 영향을 미치지 않으며, 주로 타입 검사와 문서화에 유용합니다.

타입 검증 vs. 타입 단언: as는 타입 단언으로, 개발자가 컴파일러에게 타입을 강제로 지정하게 합니다. 반면, satisfies는 타입이 특정 조건을 만족하는지 검증합니다. 

 

안전성: satisfies는 타입 불일치 시 컴파일 오류를 발생시켜, 코드의 타입 안전성을 높입니다. as는 런타임 오류를 유발할 수 있는 위험을 갖고 있습니다.

 

용도: as는 주로 타입 정보가 부족한 상황에서 사용되며, satisfies는 타입 계약을 확인하고 문서화하는 데 유용합니다.

 

satisfies를 사용함으로서 더욱 강력한 타입세이프 기능을 활용하고 더 편한 개발을 할 수 있을것같습니다!

Reference

https://www.youtube.com/watch?v=r1L35zxZQPE