타입스크립트는 또 다른 고수준 언어인 자바스크립트로 컴파일되며, 실행 역시 타입스크립트가 아닌 자바스크립트로 이루어집니다.

아이템1 타입스크립트와 자바스크립트의 관계 이해하기

• “타입스크립트는 자바스크립트의 상위 집합(supserset)이다.”
• “타입스크립트는 타입이 정의된 자바스크립트의 상위집합이다.”

타입스크립트는 문법적으로도 자바스크립트의 상위집합입니다. 문법의 유효성과 동작의 이슈는 독립적인 문제입니다. 타입스크립트는 작성된 코드를 파싱하고 자바스크립트로 변환할 수 있습니다.

자바스크립트 파일이 .js(또는 .jsx) 확장자를 사용하는 반면, 타입스크립트 파일은 .ts(또는 .tsx) 확장자를 사용합니다. 타입스크립트는 자바스크립트의 상위집합이기 때문에 .js 파일에 있는 코드는 이미 타입스크립트라고 할 수 있습니다.

이러한 특성은 기존에 존재하는 js 코드를 ts로 마이그레이션하는데 엄청난 이점이 됩니다. 모든 js 프로그램이 ts라는 명제는 참이지만, 그 반대는 성립되지 않습니다.

function greet(who: string) {
	console.log("Hello", who);
}

그러나 js를 구동하는 노드 같은 프로그램으로 앞의 코드를 출력하면 오류를 출력합니다.

: string 은 ts에서 쓰이는 타입 구문입니다. 타입 구문을 사용하는 순간부터 js는 ts 영역으로 들어가게 됩니다.

ts 컴파일러는 ts 뿐만 아니라 js 프로그램에도 유용하다.

let city = "new york city"
console.log(city.toUppercase());

이 코드를 실행하면 다음과 같은 오류가 발생합니다.

TypeError: city.toUppercase is not a function

타입 시스템의 목표 중 하나는 런타임에 오류를 발생시킬 코드를 미리 찾아내는 것입니다. 타입스크립트가 ‘정적’ 타입 시스템이라는 것은 바로 이런 특징을 말하는 것입니다.

타입스크립트는 타입 구문 없이도 오류를 잡을 수 있지만, 타입 구문을 추가한다면 훨씬 더 많은 오류를 찾아낼 수 있습니다. 코드의 ‘의도’가 무엇인지 타입 구문을 통해 타입스크립트에게 알려줄 수 있기 때문에 코드의 동작과 의도가 다른 부분을 찾을 수 있습니다.