타입 캐스팅은 무엇인가요?
with 자바스크립트, 타입스크립트
'타입 캐스팅'이라는 단어를 처음 봤을 때, '캐스팅'이 어떤 의미인지 바로 떠오르지 않았습니다.
이번 포스팅에서는 캐스팅의 의미를 먼저 살펴본 다음, 타입 캐스팅의 의미를 살펴보겠습니다. 그리고 자바스크립트에서의 타입 변환 방법과 타입스크립트의 타입 단언이 타입 캐스팅에 해당하는지 살펴보겠습니다.
Casting
구글을 검색해 보았습니다. 제일 상단에 wikipedia가 뜨네요.
Casting is a manufacturing process in which a liquid material is usually poured into a mold, which contains a hollow cavity of the desired shape, and then allowed to solidify.
casting(주조)는 일반적으로 원하는 모양의 빈 공간이 있는 금형에 액체 재료를 부은 다음 굳게 하는 제조 공정입니다.
캐스팅은 주조라는 의미였습니다. 주조는 금형에 액체 재료를 부어서 원하는 모양으로 만드는 제조 공정이구요. 그렇다면 타입 캐스팅은 무엇일까요?
Type casting
타입 캐스팅의 정의도 wikipedia에서 찾아보았습니다.
In computer science, type conversion, type casting, type coercion, and type juggling are different ways of changing an expression from one data type to another.
컴퓨터 과학에서 type conversion, type casting, type coercion, and type juggling은 한 데이터 타입에서 다른 데이터 타입으로 표현식을 변경하는 여러 가지 방법입니다.
앞에서 '캐스팅'의 의미를 살펴보아서 그런지, 금형에 부은 액체가 새로운 형태로 변하듯이 한 데이터 타입이 다른 데이터 타입으로 변환되는 과정을 'casting'이라고 부르는 것은 이해하기 쉬운 표현인 것 같습니다.
자바스크립트의 타입 변환
자바스크립트에서 타입을 변환하는 방식에 대해서 살펴보겠습니다.
JavasScript에도 타입이 존재합니다.
- number
- string
- null
- undefined
- boolean
- symbol
- bigint
- object
자바스크립트에는 타입을 변환하는 방법으로 명시적 형 변환(Explicit Conversion)과 암시적 형 변환(Implicit Coercion)의 두 가지 방법이 존재합니다.
(🚧 자바스크립트에서는 타입 변환을 casting이라고 표현하기 보다는 Type coericon, Type conversion을 사용하며, 두 개념을 묶어서 Type converting이라는 표현을 사용하기도 합니다.)
명시적 형 변환(Explicit Conversion)
함수를 통해 타입을 변경하는 것을 명시적 형 변환(Explicit Conversion)이라고 합니다.
const num = Number('1234')
const str = String(num)
console.log(typeof num) // number
console.log(typeof str) // string
암시적 형 변환(Implicit Coercion)
연산시 유형이 맞지 않을 경우 런타임에 강제(coercion)로 타입을 변환 하는것을 암시적 형 변환(Implicit Coercion)이라고 합니다.
const res = '1' + 2
console.log(res) // '12'
타입스크립트의 타입 변환
타입스크립트에서 타입을 변경할 수 있지만, 타입스크립트 문법만으로 타입을 변환하는 것은 안전하지 않습니다. 그 이유를 Type Assertion으로 살펴보겠습니다.
Type Assertion: 위험하게 타입 변환하기
질문: Type Assertion은 Type casting일까요?
let someValue: unknown = '문자열';
(someValue as string).length
‘as’도 타입을 변경하는 것처럼 보이지만, 실제로는 'Type casting'과는 다릅니다. 앞서 캐스팅의 의미를 살펴봤습니다. 원래 금속을 녹여서 틀에 부어 특정 형태로 만드는 주조 과정이라구요.
이렇게 생각하면, 타입스크립트의 as 키워드가 실제 '캐스팅'은 아니라는 것이 더 명확해집니다 as는 실제로 데이터를 다른 형태로 '캐스팅'하지 않고 단지 컴파일러에게 '이 데이터는 이런 형태로 보면 됩니다'라고 알려주는 것이기 때문입니다. 관련 내용을 타입스크립트 Deep Dive의 Type Assertion에서 찾을수 있었습니다.
The reason why it's not called "type casting" is that casting generally implies some sort of runtime support. However, type assertions are purely a compile time construct and a way for you to provide hints to the compiler on how you want your code to be analyzed.
“타입 캐스팅"이라고 부르지 않는 이유는 캐스팅이 일반적으로 일종의 런타임 지원을 의미하기 때문입니다. 그러나 type assertion은 순전히 컴파일 시간 구성이며 코드를 분석하는 방법에 대한 힌트를 컴파일러에 제공하는 방법입니다.
// Type Assertion (타입 단언) - 컴파일러에게 힌트를 주는 것
const str: unknown = "hello";
const length = (str as string).length;
// Type Casting (타입 변환) - 실제 값을 변환
const num = Number("123"); // 실제로 string을 number로 변환
타입스크립트는 자바스크립트로 트랜스파일 되는 과정에서 타입이 사라집니다. 당연하게도 as 키워드 또한 사라지게 되죠. Type Assertion은 개발자가 확신할 수 있는 상황에서는 간편하게 사용할 수 있는 장점이 있지만, 단점으로는 런타임 에러가 발생할 위험이 존재합니다.
let someValue: unknown = '문자열';
(someValue as string).length; // ok
someValue = 123;
(someValue as string).length; // error
그렇다면 안전하게 타입을 변환하려면 어떻게 해야할까요?
Type Conversion: 안전하게 타입 변환하기
런타임에 존재하지 않는 타입스크립트를 안전하게 변경하기 위해서는 결국 자바스크립트의 명시적 타입 변환 함수를 사용하여 안전하게 타입을 변환해야 합니다. 이러한 타입 변환을 타입스크립트 컴파일러는 정적 분석을 통해 적절한 타입으로 추론하게 됩니다.
마무리
이번 글에서는 '타입 캐스팅'이라는 용어를 시작으로, 자바스크립트와 타입스크립트의 타입 변환에 대해 알아보았습니다. 몇 가지 중요한 내용을 정리해보면 다음과 같습니다.
- 타입 캐스팅(Type Casting)은 제조업의 주조 과정에서 유래한 용어로, 프로그래밍에서는 한 데이터 타입을 다른 데이터 타입으로 변환하는 것을 의미
- 자바스크립트에서는 타입 변환을 주로 type conversion(명시적 형 변환)이나 type coercion(암시적 형 변환)이라는 용어로 표현
- 타입스크립트의 as 키워드는 타입 캐스팅이 아닌 Type Assertion(타입 단언)이며, 런타임에 영향을 주지 않고 컴파일러에게 힌트를 주는 역할
- 안전한 타입 변환을 위해서는 타입스크립트의 Type Assertion보다는 자바스크립트의 명시적 타입 변환 함수를 사용하는 것이 바람직
결국 타입스크립트에서 안전하게 타입을 다루기 위해서는, 컴파일 타임의 타입 체크와 런타임의 실제 값 변환을 모두 고려해야 함을 알 수 있습니다. 이는 타입스크립트가 자바스크립트의 슈퍼셋으로서 가지는 특성을 잘 보여주는 예시라고 할 수 있겠습니다.