Effective Typescript - 3 - 코드 생성과 타입이 관계없음을 이해하기

큰 그림에서 보면 타입스크립트 컴파일러는 두 가지 역할을 합니다.

* 최신 타입스크립트/자바스크립트를 브라우저에서도 동작할 수 있도록 구 버전의 자바스크립트로 트랜스파일(transpile) 합니다.

* 코드의 타입 오류를 체크합니다.

 

위 두가지 동작은 완전히 독립적이라 합니다. 타입스크립트가 자바스크립트로 변환될 때 코드 내의 타입은 더 이상 유효하지 않습니다. 즉, 자바스크립트 런 타임에도 타입은 전혀 영향을 주지 않습니다.

 

타입 오류가 있는 코드도 컴파일이 가능합니다.

아래 코드는 분명 타입 체커에 의해 오류가 발생하지만 실제로는 컴파일이 가능합니다.

let x = 'test'; x = 1234 // 에러 Type 'number' is not assignable to type 'string'.(2322)

//컴파일 결과 "use strict"; let x = 'test'; x = 1234;

 

런타임에는 타입 체크가 불가능합니다.

아래 예제를 보면 Rectangle 인터페이스는 컴파일이 되고 나면 모두 제거됩니다. 그러나 오류가 발생한 코드를 보면

instanceof라는 런타임 연산자를 타입스크립트 타입과 함께 쓰고 있기 때문에 오류가 발생합니다.

이와 같은 오류를 수정하기 위한 수단으로, 아이템 37에서 소개하는 상표 붙이기 기법 등을 활용할 수 있습니다. 아니면 '태그된 유니온' 기법을 사용할 수도 있습니다.

interface Squre {     width: number; } interface Rectangle extends Squre {     height: number; } type Shape = Squre | Rectangle; function calcArea(shape: Shape){     // 오류) instanceof는 런타임에 일어나는 연산이지만 Rectangle은 타입스크립트의 타입입니다.     if(shape instanceof Rectangle){         return shape.width * shape.height;     }else {         return shape.width * shape.width;     } }

 

타입 연산은 런타임에 영향을 주지 않습니다.

function asNumber(val: number | string): number {     return val as number; }

//트랜스파일된 자바스크립트 코드 "use strict"; function asNumber(val) {     return val; }

as number와 파라메터에 명시된 number | string과 같은 코드는 런타임 동작과는 전혀 상관이 없다는 것을 확인할 수 있습니다.

 

런타임 타입은 선언된 타입과 다를 수 있습니다.

예를 들면 아래와 같은 예제를 보면 그 가능성이 열려 있다는 것을 알 수 있습니다. (fectch() 결과가 예상과는 다르다면?)

function setLightSwitch(value: boolean) {     switch(value) {         case true:             turnLightOn();             break;         case false:             turnLightOff();             break;         default:             console.log('전혀 실행될 수 없는 것처럼 보입니다. 과연 그럴까요?');     } } interface LightApiRes {     lightSwitchValue: boolean; } async function setLight(){     const res = await fetch('/light'); // 응답 결과가 예상했던 데이터 포멧이 아니라면?     const result: LightApiRes = await res.json();       setLightSwitch(result.lightSwitchValue); //따라서 여기서 파라메터로 넘기는 값이 boolean 타입이 아니라면? }

 

타입스크립트 타입으로는 함수를 오버로드할 수 없습니다.

타입스크립트가 함수 오버로딩 기능을 지원하기는 하지만, 온전히 타입 수준에서만 동작합니다.

function add(a: number, b: number): number; // 선언문은 타입 정보만 제공함 function add(s: string, s: string): string; // 선언문은 타입 정보만 제공함 function add(a, b){     return a + b; } const three = add(1, 2); // 3 const twelve = add('1', '2'); // '12'

 

타입스크립트 타입은 런타임 성능에 전혀 영향을 주지 않습니다. 왜냐하면 타입 관련된 코드들은 컴파일 되고나면 모조리 사라지기 때문입니다.