타입스크립트 코드는 다른 언어들과는 다르게 또 다른 고수준 언어인 자바스크립트로 컴파일된다.

자바스크립트는 타입스크립트의 부분집합이다. 타입스크립트는 자바스크립트의 상위집합이다. 따라서 .js 확장자 파일의 코드는 이미 타입스크립트 코드이다. .js 확장자를 .ts 확장자로 변환한다고 해서 달라지는 것은 없다. 그러나 타입스크립트 코드라고 해서 모두 다 자바스크립트 코드는 아니다.

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

위의 코드를 .js 파일에서 구동하면 다음과 같은 에러가 발생한다.

SyntaxError: Unexpected token :

타입스크립트는 자바스크립트의 런타임 동작을 모델링하는 타입 시스템을 가지고 있다. 이 타입 시스템의 목표 중 하나는 런타임 전 코드의 오류를 미리 찾아내는 것이다. 따라서 타입스크립트는 ‘정적’ 타입 시스템이라 부르기도 한다. 타입 체커뿐 아니라 잠재적인 오류를 찾는 데도 도움을 줄 수 있다.

interface State {
	name: string
	capital: string
}

const states: State[] = [
	{ name: 'Alabama', capitol: 'Montgomary' }, // 에러 발생!
	{ name: 'Alaska', capitol: 'Juneau' },
	{ name: 'Arizona', capitol: 'Phoenix' },
] 
// Object literal may only specify known properties, 
// but 'capitol' does not exist in type 'State'. 
// Did you mean to write 'capital'?

하지만 타입 체커를 통과했더라도 런타임 오류가 발생하는 경우도 있다.

const names = ['Alice', 'Bob']
console.log(names[2].toUpperCase())
// TypeError: Cannot read properties of undefined (reading 'toUpperCase')

타입스크립트의 타입 체킹은 문제가 없었지만, 코드를 실행시키는 과정에서 오류가 발생하였다.