as < satisfies

as는 타입 단언을 할 수 있는 키워드이다. 컴파일러가 추론 하지 못하는 상황에서 개발자 입장에서 확실하다고 느낄 때 사용할 수 있다. 하지만 실제로 형변환이 일어나는 것은 아니다. 코드의 런타임 동작에는 아무런 영향을 주지 않는다.

 

const number = 10;

const showValue =  (value : string) => console.log(value);

showValue(number as unknown as string);

 

문제가 있는 부분인데 빨간 줄이 안뜬다! . as는 정말 확실할 때 써야한다. 

 

const person: Record<string, string | number> = {
  name: 'bk',
  age: 27,
  hobby: 'music',
};

const showNumber = (value : number) => console.log(value);

showNumber(person.age);

 

위 코드의 showNumber를 사용하는 부분에서 string | number 타입은 number 타입에 대입될 수 없다는 에러가 발생한다. 근데 코드를 보면 age가 number인 것을 확인 할 수 있기 때문에 person.age as number 로 하게되면 에러가 사라진다.

 

그런데 이때  이전 글에서 한번 다뤘었던 satisfiles 키워드를 사용할 수 있다.

 

const person2 = {
    name: 'kb',
    age: 72,
    hobby: 'golf',
  } satisfies Record<string, string | number>;
  
showNumber(person2.age)

아무런 에러가 발생하지 않고 심지어 name, age, hobby도 추론된다. 

 

satisfiles 는 안정적인 업캐스팅을 지원한다. as는 최대한 지양하고 필요하다면 satisfiles를 활용하거나 타입 가드를 통해 처리해야겠다.