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

이 시리즈는 댄 밴더캄이 쓴 책인 Effective Typescript를 번역한 이펙티브 타입스크립트를 읽고 공부를 위해 정리한 책입니다.

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

타입스크립트는 자바스크립트의 상위 집합이다.

타입스크립트는 자바스크립트의 상위집합입니다. 즉 타입스크립트가 자바스크립트를 포함하는 형태입니다.

위 그림과 같이 타입스크립트가 자바스크립트보다 더 큰 개념을 포괄합니다.

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

위 코드는 타입스크립트에서는 정상적으로 돌아가는 코드입니다. 하지만 자바스크립트에서는 오류를 발생시킵니다. : string은 자바스크립트에서 유효하지 않은 문법이므로 아래와 같은 오류를 발생시킵니다.

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

Type annotations can only be used in Typescript files. ts(8010)

이렇게 타입 구문을 사용하게 되면 자바스크립트는 타입스크립트가 됩니다.

타입 시스템의 목표?

타입 시스템의 목표 중 하나는 프로그램 런타임에서 발생할 오류를 미리 찾아내는데 있습니다. 자바스크립트에 없는 '정적'타입 시스템이 바로 그것인데, 하지만 타입체커가 모든 오류를 검증해내기는 불가능합니다. 아래 코드를 한번 보시죠.

const states = [
	{ name: "Alabama", capital: "Montgomer" },
	{ name: "Alaska", capital: "Juneau" },
	{ name: "Arizona", capital: "Phoenix" },
];

for (const state of states) {
	console.log(state.capitol);
}

위 자바스크립트 코드를 돌리면 아래와 같은 결과가 나오게 됩니다.

linux> node states.js
undefined
undefined
undefined

위 코드는 어떠한 에러도 발생시키지 않고 동작합니다. 다만 반복문 안에서의 state.capitol은 명백한 실수로 보여집니다. 이런 경우에 타입체커는 추가적은 타입 구문의 도움없이도 위 오류를 찾아냅니다.

const states = [
	{ name: "Alabama", capital: "Montgomer" },
	{ name: "Alaska", capital: "Juneau" },
	{ name: "Arizona", capital: "Phoenix" },
];

for (const state of states) {
	console.log(state.capitol);
					 ^
					 Property 'capitol' does not does not exist on type .... Do you mean 'capital'? ts(2551)
}