본문으로 건너뛰기

아이템3

코드 생성과 타입이 관계 없음을 이해하기​

타입스크립트 컴파일러의 역활​

  • 최신 타입스크립트나 자바스크립트를 브라우저에서 동작할 수 있도록 구버전 타입스크립트로 (트랜스파일)한다.
  • 코드의 타입 오류를 체크합니다.
  • 타입체크와 컴파일은 독립적으로 동작한다.
  • 타입 스크립트의 noEmitOnError 속성을 건들여 오류시 컴파일 하지 않도록 조치를 취할수 있다.

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

interface Square {
  width: number;
}
interface Rectangle extends Square {
  height: number;
}
type Shape = Square | Rectangle;

function calculateArea(shape: Shape) {
  if (shape instanceof Rectangle) {
    return shape.width * shape.height;
  } else {
    return shape.width * shape.width;
  }
}
  • instanceof 체크는 런타임에 일어나지만 Rectangle은 타입이기 떄문에 런타임 시점엔 아무것도 할 수 없다.
  • 이를 해결하기 위해 태그된 유니온 방법을 사용하거나 (타입을 값으로 가진다.)
interface Square {
  kind: `square`;
  width: number;
}
interface Rectangle extends Square {
  kind: `rectangle`;
  height: number;
}
  • 클래스로 선언해 타입과, 값으로로 이용할 수 있도록 한다.

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

'as' 키워드란 요약하자면 '컴파일' 단계에서 타입 검사를 할 때 타입스크립트가 감지하지 못하는 애매한 타입 요소들을 직접 명시해주는 키워드이다.
const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;

function asNumber(val:number || string):number{
    return typeof(val) === "string" ? Number(val) : val
}

타입스크립트는 함수 오버로딩를 할 수 없다.​

타입스크립트 타입은 런타임 성능에 영향을 주지 않는다.​

  • 타입 연산자는 자바스크립트 변환 시점에 제거되기 떄문에 런타임의 성능에 아무런 영향을 주지 않는다.
  • 다만 빌드타입 오버헤드가 존재하는데 이를 빌드도구에서 트랜스파일만 설정을 통해 오버헤드가 커지면 타입체크를 건너 뛸 수 있다.