캐스팅 (Casting)

이전의 포스팅에서 객체를 선언할 때 as const로 캐스팅을 하면 특정한 값(구체적인 값)으로 추론할 수 있다고 했다.

이번 포스팅에서 이 as에 대해서 자세히 알아보자.

캐스팅에서 가장 중요한 것은 타입스크립트는 자바스크립트로 컴파일되는 언어라는 것이다. 타입스크립트에서 캐스팅을 하면 자바스크립트에서는 적용이 안된다.
캐스팅은 자바스크립트에서 존재하지 않는 개념이기 때문에 실제 구동하는 코드에서 아무런 의미를 가지지 않는다.

let a = 'a';
let num = 3;

console.log(a.toUpperCase());

a는 string 타입이기 때문에 string 전용 함수인 toUpperCase 함수를 사용할 수 있다. 하지만 num은 number 타입이기 때문에 사용할 수 없다.

하지만 다음 코드를 보자.

let sampleNum: any = 5;
console.log(sampleNum.toUpperCase());
let stringVar = sampleNum as string; // string 타입이라고 가정
console.log(stringVar); // 숫자 5

any 타입의 문제점은 sampleNum 변수에 toUpperCase라는 함수가 존재하는 것처럼 가정을 해버린다. 왜냐하면 any 타입은 무엇이든 될 수 있기 때문이다. 하지만 이것을 실행하면 에러가 발생한다. 코드 상으로는 문제가 없는 것으로 보인다(intelliJ를 쓰면 에러로 표시됨)

실제로 stringVar을 출력해보면 숫자값인 5가 출력된다.

그래서 캐스팅을 할 경우 그 타입이 아니더라도 그 타입인 것처럼 가정을 할 수가 있다.

console.log(typeof (sampleNum as string));

이 코드의 결과는 number다. 맨 위에서 말했다시피 캐스팅은 자바스크립트로 실행할 때는 아무런 의미를 가지지 않는다. 그래서 캐스팅을 마음대로 막 해버리면 안된다는 것을 명심하자!!

---

또 하나의 다른 예제를 보자.

let number = 5;
console.log((number as any).toUpperCase());

number는 toUpperCase 함수를 가지고 있지 않다. 하지만 코드 상에서는 캐스팅을 하면 toUpperCase 함수를 사용할 수 있는 것처럼 보인다.

as를 쓸 때는 보통 상속상에서 더 구체화된 값으로 캐스팅을 할 때 as 사용한다. 그런 예제가 캐스팅을 할 때 좋은 형태다.
귀찮다고 any로 캐스팅을 작업하지는 말자!!

---

후기

캐스팅에서 가장 중요한 건 타입스크립트 코드 상에서만 의미가 있다는 것이다. 실제로 런타임에서는 없는 코드나 마찬가지이기 때문에 사용할 때 주의해야 할 것 같다.