타입 스크립트의 TypeAssertion은 이 타입으로 주장하겠다는 의미이다.
여기서 타입을 주장한다는 무엇일까?
예를 들어 다음과 같은 코드가 있다고 가정해보자.
function myFc ( a : number | string ){
return a + 1;
}타입스크립트에서는 a의 타입이 확정되지 않았기 때문에 위 코드에서는 에러 를 발생시킨다.
number인지, string인지 a가 무슨 타입인지 알 수 없기 때문이다.
이때 Narrowing으로 타입을 확정시켜주거나, Assertion을 통해 타입을 강제 확정시킬 수 있다.
Narrowing VS Assertion
function myFc ( a : number | string ){
if(typeof a === 'number'){
return a + 1;
}else {
return a + '1';
}
}먼저 Narrowing으로 타입을 확정시켜준 경우이다.
다음으로 Assertion을 살펴보자
function myFc ( a : number | string ){
return (a as number) + 1;
}Assertion을 쓸 떄는 as 키워드를 사용하면 된다.
이렇게하면 a라는 변수는 무조건! 무슨일이 있어도 number 타입이야! 라고 주장하는 것이다.
그렇기 때문에 아래와 같은 코드로 myFc 함수를 호출해도 에러가 발생하지 않는다.
function myFc ( a : number | string ){
return a as number + 1;
}
console.log ( myFc('hi') ); // hi1그런데 뭔가 좀 이상하다.
string 타입도 받을 수 있는데 안에서는 number로 무조건 주장하겠다니.
물론 자바스크립트처럼 유동적으로 사용한다면 문제될 건 없지만 여기는 타입스크립트..
여기까지만 본다면 as는 왜 사용할까?
어딘가 쓰이는 곳이 있으니 있긴..하겠지? 라는 느낌을 받는다.
as를 어떤 경우에 효율적으로 사용할 수 있는지 조금 더 살펴보기로 했다.
다음과 같은 코드가 있다고 해보자.
const obj = {
name : '아이유'
}
obj.name = '이지은';const로 선언했더라도 객체나 배열은 내부의 값을 변경시킬 수 있다.
const obj = {
name : '아이유' as const
}
obj.name = '이지은'; // 에러as를 사용한 이 코드는 타입 스크립트에서 에러가 발생한다.
obj 내부의 값 name은 const인데 name을 변경시키려 했기 때문이다.
무분별하게 as를 사용하면 좋지 않다.
타입이 확실한 경우에만! 사용하도록 하자.
정말정말 꼭 필요한 경우에 as를 사용하고 가능하면 Narrowing을 사용하는 쪽으로 코드를 짜는 편이 버그 찾기도 더 쉽다.
as를 쓰면 내가 타입을 강력!! 주장했기 때문에 타입 스크립트가 해당 부분의 에러를 잡아주지 않는 경우가 있기 때문이다.
참고 자료
타입스크립트 타입 표명(Type Assertion)
TypeScript 3.4: const assertion
