타입이 왜 필요한가

실행하기 전에 알려 줍니다

JavaScript 는 값의 종류를 미리 정하지 않습니다. 숫자를 담아 둔 변수에 나중에 글자를 넣어도 아무 말이 없습니다. 잘못된 것을 알게 되는 때는 그 코드가 실행되는 순간입니다.

let age = 27;
age = "스물일곱";

console.log(age + 1);   // "스물일곱1"

JavaScript 는 이것을 그대로 실행합니다. "스물일곱1" 이 나오고 프로그램은 계속 돕니다. 잘못을 알아차리는 것은 한참 뒤, 그 값이 다른 곳에서 쓰일 때입니다.

TypeScript 는 값에 종류를 적어 둡니다. 그러면 실행하기 전에 확인할 수 있습니다.

let age: number = 27;
age = "스물일곱";   // 여기서 막힙니다

: number 가 그 적어 둔 것입니다. 이것 하나로 age 에는 숫자만 들어갈 수 있게 됩니다.

타입이 맞으면 그냥 돕니다

let age: number = 27;
const name: string = "홍길동";

function introduce(who: string, years: number): string {
	return `${who} (${years}세)`;
}

console.log(introduce(name, age));

TypeScript 도 결국 JavaScript 로 바뀌어 실행됩니다. 이 화면에서도 그렇습니다 — 타입을 확인한 뒤 그것을 지우고 JavaScript 로 바꿔 실행합니다.

: string 을 매개 변수와 반환값에도 적었습니다. 어디에 적을 수 있는지는 1.2 부터 하나씩 봅니다.

타입이 어긋나면 멈춥니다

let age: number = 27;

age = "스물일곱";

console.log(age + 1);

아무것도 실행되지 않았습니다. console.log 까지 가지 못하고 그 앞에서 멈춥니다. JavaScript 였다면 "스물일곱1" 이 나왔을 자리입니다.

오류를 읽는 방법은 JavaScript 때와 같습니다. 3:1 이 몇 번째 줄 몇 번째 글자인지, TS2322 가 오류 번호, 그 뒤가 무엇이 어긋났는지입니다.

오타도 잡습니다

타입을 적어 두면 그 값이 무엇을 가지고 있는지도 함께 알게 됩니다. 없는 것을 꺼내려 하면 그것도 오류입니다.

const user = { name: "홍길동", age: 27 };

console.log(user.nmae);

타입을 하나도 적지 않았는데 잡혔습니다. 넣은 값을 보고 TypeScript 가 { name: string; age: number; } 라고 알아낸 것입니다. 이것을 추론이라고 하며 1.2 에서 다룹니다.

JavaScript 에서 user.nmae 는 오류가 아니라 undefined 입니다. 화면에 아무것도 안 나오거나 undefined 가 찍히고, 원인을 찾는 것은 사람의 몫이었습니다.

함수에 잘못 넘기는 것도 잡습니다

function greet(who: string) {
	return `안녕하세요, ${who} 님`;
}

console.log(greet("홍길동"));
console.log(greet(27));

맞게 부른 5번째 줄도 실행되지 않았습니다. 타입 검사는 코드 전체를 보고, 한 군데라도 어긋나면 실행하지 않습니다. 실제 개발에서도 같습니다 — 컴파일이 끝나야 실행할 것이 나옵니다.

greet(27) 은 JavaScript 에서는 돕니다. "안녕하세요, 27 님" 이 나옵니다. 그것이 원하던 것인지 아닌지는 코드가 알 수 없고, 사람이 나중에 발견합니다.

처음에 자주 걸리는 것

직접 해보기

let count: number = 0;

count = count + 1;

console.log(count);

function double(n: number): number {
	return n * 2;
}

console.log(double(21));

이 단원의 정리