타입스크립트는 자바스크립트의 상위 집합이다.
모든 자바스크립트는 타입스크립트 이지만, 일부 자바스크립트(그리고 타입스크립트)만이 타입 체크를 통과한다.
자바스크립트 런타임으로 돌리면 정상 동작하지만, 타입체커는 통과못해서 문제점이 표시되는 코드 예시
const a = null + 7; // 자바스크립트에서는 a값이 7이 되지만, 타입체커는 통과하지 못함.
const b = [] + 12; // 자바스크립트에서는 b값이 12가 되지만, 타입체커는 통과하지 못함.코드 생성과 타입은 관계가 없다.
타입 스크립트 컴파일러는 크게 두 가지 역할을 수행한다.
- 최신 타입스크립트/자바스크립트를 브라우저에서 동작할 수 있도록 구버전의 자바스크립트로 트랜스파일한다.
- 코드의 타입 오류를 체크한다.
두 가지는 서로 완벽히 독립적으로 일어난다. 이로 인해서,
1) 타입오류가 있는 코드도 컴파일이 가능하다.
2) 런타임에는 타입체크가 불가능하다.(타입 체크를 하려면 태그된 유니온,속성 체크, 클래스를 사용하면 된다.)
3) 런타임의 타입과 선언된 타입이 다를 수 있다.
4) 타입스크립트 타입으로는 함수를 오버로드 할수 없다.
5) 타입스크립트 타입은 런타임 성능에 영향을 주지 않는다.(타입과 타입 연산자는 트랜스파일 시점에 제거되기 때문)
타입스크립트는 자바스크립트를 모델링하기 위해 구조적 타이핑을 사용한다.
자바스크립트는 본질적으로 덕 타이핑 기반이다.
덕 타이핑
만약 어떤 함수의 매개변수 값이 모두 제대로 주어진다면, 자바스크립트는 그 값이 어떻게 만들어 졌는지 신경쓰지 않고 그대로 사용한다.
구조적 타이핑
타입스크립트는 이런 동작, 즉 매개변수 값이 요구사항을 만족한다면 타입이 무엇인지 신경 쓰지 않는 동작을 그대로 모델링하는데, 이를 위해 구조적 타이핑을 사용한다.
즉, 구조적 타이핑은 호환의 개념이다.
interface Vector2D {
x: number;
y: number;
}
interface Vector3D {
x: number;
y: number;
z: number;
}위에서 Vector3D 타입은 Vector2D의 속성을 모두 가지고 있기 때문에 Vector2D타입으로도 인식된다.
타입스크립트는 모두 정확히 같은 속성만을 가지는 타입만을 같은 타입으로 인식할 것이라 생각하지만, 그렇지 않다.
타입스크립트의 타입 시스템에서 타입은 열려있다.(봉인되어 있지 않다.)
