타입 검사기가 하는 일

타입 검사기(type checker)는 코드를 실행하지 않고 읽어, 값의 종류인 타입(type)이 맞는지만 보는 프로그램입니다. 타입스크립트(TypeScript)는 자바스크립트에 타입을 적을 수 있게 한 언어이고, 검사기가 실행하기 전에 코드의 실수를 짚어 줍니다.

자바스크립트는 속성 이름을 잘못 써도 멈추지 않고 끝까지 돕니다. 그래서 틀린 결과를 보고서야 실수를 알아채는 때가 많습니다. 검사기는 같은 실수를 실행하기 전에 줄 번호와 함께 알려 줍니다. 이 과목은 검사기가 코드를 읽는 규칙을 '검사 규칙'이라 부르고 일곱을 하나씩 세웁니다. 자바스크립트를 실행하는 규칙(자바스크립트 과목의 '규칙 1~8')과는 다른 번호입니다. 이 레슨에서는 검사 규칙 1의 앞 절반을 세웁니다.

const order = {  name: '라테',  price: 4500,};console.log(order.prise);

다음 단계에서 검사합니다

Node가 실행하면 여기에 나옵니다

const order = {  name: '라테',  price: 4500,};console.log(order.prise);

main.ts(5,19): error TS2551: Property 'prise' does not exist on type '{ name: string; price: number; }'. Did you mean 'price'?

Node가 실행하면 여기에 나옵니다

const order = {  name: '라테',  price: 4500,};console.log(order.prise);

main.ts(5,19): error TS2551: Property 'prise' does not exist on type '{ name: string; price: number; }'. Did you mean 'price'?

?

const order = {  name: '라테',  price: 4500,};console.log(order.prise);

main.ts(5,19): error TS2551: Property 'prise' does not exist on type '{ name: string; price: number; }'. Did you mean 'price'?

undefined

const order = {  name: '라테',  price: 4500,};console.log(order.prise);

다음 단계에서 검사합니다

Node가 실행하면 여기에 나옵니다

1검사 결과와 실행 결과

그림의 코드는 주문 하나를 객체로 만들고, 5번 줄에서 가격을 찍으려다 price를 prise로 잘못 썼습니다. 이 코드를 두 프로그램에 줍니다. 검사기 tsc는 코드를 읽어 검사하고, Node는 코드를 실행합니다. 그래서 결과도 둘입니다.

const order = {
  name: '라테',
  price: 4500,
};
console.log(order.prise);

main.ts(5,19): error TS2551: Property 'prise' does not exist on type '{ name: string; price: number; }'. Did you mean 'price'?

undefined

'검사 결과' 상자는 tsc가, '실행 결과' 상자는 Node가 낸 결과입니다. 앞으로 '검사 결과' 상자가 없는 예제는 검사를 지난 코드입니다. 머리에 '오류 없음'만 있는 검사 결과 상자도 같은 뜻입니다. 이 과목의 검사 결과는 모두 tsc 7.0.2로, 실행 결과는 Node 26으로 돌려 얻었습니다. 타입스크립트 파일은 이름 끝이 .ts이고, 예제는 main.ts라는 파일로 저장해 검사하고 실행했습니다.

검사 결과는 한 줄입니다. main.ts(5,19)는 main.ts의 5번 줄 19번째 칸, 곧 prise가 시작하는 자리입니다. error TS2551은 검사 오류와 그 번호입니다. 그 뒤 문장의 Property 'prise'는 '속성 prise', does not exist on type⁠은 '…타입에 없다'입니다. 곧 order에는 prise라는 속성이 없다는 뜻입니다. 끝의 Did you mean 'price'?⁠는 '혹시 price인가요?'라는 검사기의 짐작입니다. 오류 문장을 읽는 차례는 이 단원의 타입 오류 읽기에서 자세히 봅니다.

실행 결과는 undefined입니다. Node는 5번 줄을 실행해 undefined를 찍고, 오류 없이 끝납니다.

JS 다시 보기: 객체에 없는 속성을 꺼내면 오류 없이 undefined가 나옵니다(JS '객체: 이름 붙은 칸 묶음').

실수는 undefined에 묻혀 지나갑니다. 이 값으로 계산을 이어 가면 틀린 결과가 나온 뒤에야 알아챕니다. 검사 오류는 Node가 실행하다 내는 오류와도 다릅니다.

JS 다시 보기: Node는 실행하다 막힌 줄에서 멈추고, …Error: 줄로 무슨 일인지 알려 줍니다(JS '오류 메시지 읽기').

검사 오류는 실행하기 전에 나오고, 한 줄에 자리 · 번호 · 문장이 함께 있습니다. VS Code 같은 편집기도 같은 검사기로 코드를 읽어, 코드를 쓰는 동안 오류 자리에 물결 밑줄을 긋습니다.

2검사기는 타입만 본다

검사 결과 첫 문장 끝의 따옴표 안 글자는 검사기가 본 order의 타입입니다. 검사기는 1~4번 줄을 읽고 order의 타입을 이렇게 정해 둡니다.

값 '라테'와 4500은 이 타입에 없습니다. 속성 이름과 그 타입만 있습니다. 5번 줄에서 검사기는 order의 타입에 prise가 있는지 봅니다. 없으니 검사 오류입니다. 두 프로그램이 하는 일을 견주면 다음과 같습니다.

검사기는 타입만 보므로, 계산이 뜻대로인지는 모릅니다. 곱할 자리에 더하기를 써도 수와 수를 더하는 것이라 타입은 맞습니다. 이런 코드는 예제에서 봅니다.

3검사기는 실행하지 않고 읽는다

이번에는 1절과 같은 오타를 if 안에 넣었습니다. 가격이 10000을 넘는 주문일 때만 6번 줄에서 가격을 찍는 코드입니다.

const order = {
  name: '라테',
  price: 4500,
};
if (order.price > 10000) {
  console.log(order.prise);
}
console.log('주문 끝');

main.ts(6,21): error TS2551: Property 'prise' does not exist on type '{ name: string; price: number; }'. Did you mean 'price'?

주문 끝

order.price는 4500이라 if 조건이 거짓입니다. Node는 6번 줄을 실행하지 않고 지나가 '주문 끝'만 찍습니다. 실행 결과만 보면 아무 문제가 없어 보입니다. 이 오타는 10000원이 넘는 주문이 들어오는 날에야 드러납니다.

검사 결과는 다릅니다. 검사기는 코드를 실행하지 않고 처음부터 끝까지 읽으므로, 실행되지 않는 6번 줄도 읽고 같은 오류를 냅니다. 검사기는 order.price가 4500이라는 것을 쓰지 않습니다. 2절의 표처럼 number라는 것만 알고, 조건이 참인지 따지지 않습니다.

검사 규칙 1. 검사기는 코드를 실행하지 않고 읽어, 타입이 맞는지만 봅니다.

검사 규칙 1의 뒤 절반, 곧 실행되는 것이 무엇인지는 다음 레슨 타입은 실행 전에 지워진다에서 세웁니다.

예제

검사 결과와 실행 결과를 먼저 적어 본 뒤 펼쳐 보세요. 맞혀 보기는 점수에 들지 않습니다.

const order = {
  item: '커피',
  qty: 2,
};
const total = order.qyt * 4000;
console.log(total);

검사를 지나갈까요? 지나가지 못하면 몇 번 줄에서 막힐까요? Node로 돌리면 무엇이 찍힐까요?

main.ts(5,21): error TS2339: Property 'qyt' does not exist on type '{ item: string; qty: number; }'.

NaN

다음은 라테 2잔의 금액을 찍으려는 코드입니다.

const qty = 2;
const unit = 4500;
const total = qty + unit;
console.log(total);

검사를 지나갈까요? Node로 돌리면 무엇이 찍힐까요?

4502

자주 틀리는 곳

틀린 생각: 실행할 때 오류가 나지 않으면 코드에 실수가 없다.

자바스크립트에서 오류는 실행이 멈추는 것으로 드러나니, 끝까지 돌면 맞다고 여기게 됩니다. 없는 속성을 꺼내는 실수는 실행을 멈추지 않습니다.

const order = {
  item: '쿠키',
  qty: 3,
};
const count = order.count;
console.log(order.item, count);

main.ts(5,21): error TS2339: Property 'count' does not exist on type '{ item: string; qty: number; }'.

쿠키 undefined

qty를 count로 잘못 써서 개수 자리에 undefined가 찍혔습니다. 실행은 끝까지 갔지만, 검사 결과는 5번 줄을 짚습니다.

맞는 규칙: 자바스크립트는 없는 속성을 꺼내도 멈추지 않고 undefined를 줍니다. 그래서 실행 결과에 오류가 없어도 검사 결과로 실수를 먼저 찾습니다(검사 규칙 1).

틀린 생각: 검사기는 코드를 한 번 실행해 보고 오류를 찾는다.

검사 결과에 줄 번호가 나오니, 검사기도 줄을 실행하며 따라가는 것처럼 보입니다. 검사기는 코드를 읽기만 합니다.

const order = {
  item: '쿠키',
  qty: 3,
};
console.log('주문 확인');
console.log(order.qyt);

main.ts(6,19): error TS2339: Property 'qyt' does not exist on type '{ item: string; qty: number; }'.

주문 확인
undefined

검사기가 코드를 실행했다면 5번 줄의 '주문 확인'이 검사 결과에도 찍혔을 것입니다. 검사 결과에는 오류 줄 하나뿐이고, 글자를 찍은 것은 Node입니다. 3절의 if 안 줄처럼 실행되지 않는 줄도 검사기는 읽습니다.

맞는 규칙: 검사기는 코드를 실행하지 않고 읽어 타입만 봅니다. 값을 찍고 계산하는 것은 Node가 실행할 때입니다(검사 규칙 1).

틀린 생각: 검사를 지나면 뜻대로 도는 프로그램이다.

검사기가 실수를 이만큼 찾아 주니, 검사를 지나면 다 맞으리라 여기게 됩니다. 검사기는 타입이 맞는지만 봅니다.

const coffee = 4000;
const latte = 4500;
const total = coffee + coffee;
console.log(total);

8000

커피와 라테를 더하려다 3번 줄에 coffee를 두 번 썼습니다. 둘 다 number라 검사를 지나고, 8000이 찍힙니다. 8500이어야 한다는 것은 손으로 셈해 봐야 압니다.

JS 다시 보기: 오류 없이 틀린 결과는 값을 찍어 보며 예측과 처음 갈리는 줄을 찾습니다(JS '값을 찍어 보며 고치기').

맞는 규칙: 검사기는 타입이 맞는지만 볼 뿐, 계산이 뜻대로인지는 모릅니다. 검사를 지난 뒤에도 작은 값으로 돌려, 손으로 셈한 값과 맞춰 봅니다(검사 규칙 1).

확인 문제

1. 1절 코드의 5번 줄을 console.log(order.Price);⁠로 바꿨습니다. 검사를 지나갈까요? 지나가지 못하면 몇 번 줄에서 막힐까요? Node로 돌리면 무엇이 찍힐까요?

const order = {
  name: '라테',
  price: 4500,
};
console.log(order.Price);

main.ts(5,19): error TS2551: Property 'Price' does not exist on type '{ name: string; price: number; }'. Did you mean 'price'?

undefined

2. 아래 코드가 검사를 지나고 실행 결과가 9000이 되도록 6번 줄의 빈칸에 order의 속성 이름을 채우세요.

const order = {
  item: '라테',
  qty: 2,
  table: 3,
};
const cups = order.____;
console.log(4500 * cups);

const order = {
  item: '라테',
  qty: 2,
  table: 3,
};
const cups = order.qty;
console.log(4500 * cups);

9000

3. 오늘 걸음 수가 목표에서 얼마나 모자라는지 찍으려는 코드입니다. 검사를 지나갈까요? 지나가지 못하면 몇 번 줄에서 막힐까요? Node로 돌리면 무엇이 찍힐까요?

const day = {
  steps: 8000,
  goal: 10000,
};
const walked = day.step;
console.log(day.goal - walked);

main.ts(5,20): error TS2551: Property 'step' does not exist on type '{ steps: number; goal: number; }'. Did you mean 'steps'?

NaN

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 설치 없이 브라우저에서 검사하고 돌려 보는 타입스크립트 플레이그라운드(TypeScript Playground)를 씁니다. 플레이그라운드는 이 과목과 두 가지가 다릅니다.

• 코드 맨 위에 export {}; 한 줄을 더해 붙여 넣습니다. 이 줄이 없으면 플레이그라운드가 코드를 이 과목과 다른 방식으로 읽어, 몇몇 예제에서 이 과목에 없는 오류가 납니다. 이 줄을 더하면 줄 번호가 하나씩 밀립니다.
• 타입스크립트 판이 6.0이라, 오류 문장 몇 개가 이 과목의 7.0과 조금 다를 수 있습니다. 다른 곳은 그 레슨에 적어 둡니다.

편집 칸의 글을 모두 지우고 export {};와 1절 코드를 붙여 넣으면 prise에 물결 밑줄이 생기고, 옆 칸의 Errors를 누르면 오류 문장이 보입니다. Run 단추를 누르면 Logs 칸에 실행 결과가 나옵니다. 그다음 prise를 price로 고치면 검사 결과와 실행 결과가 어떻게 바뀔지 먼저 적고, 고쳐서 맞춰 봅니다.

내 컴퓨터에 설치해 이 과목과 같은 판 · 같은 설정으로 검사하고 돌리는 법은 이 단원의 마지막 레슨 내 컴퓨터에서 검사하고 돌리기에 있습니다.