단원 연습 문제

줄마다 오른쪽 값에 따옴표가 있는지, 그 값이 왼쪽에 적은 타입의 모음에 드는지 봅니다.

main.ts(2,5): error TS2322: Type 'string' is not assignable to type 'number'.main.ts(3,5): error TS2322: Type 'string' is not assignable to type 'boolean'.main.ts(4,5): error TS2322: Type 'null' is not assignable to type 'string'.

2 · 3 · 4번 줄에서 막힙니다. 세 줄 모두 TS2322, 곧 받는 자리의 타입에 넣을 수 없는 값을 넣었다는 뜻입니다. 검사기는 오류를 찾아도 멈추지 않고 끝까지 읽어 셋을 모두 보입니다.

• 2번 줄: '120'은 따옴표 안이라 글자입니다. number 자리에 글자 값을 넣었습니다.
• 3번 줄: 'false'도 따옴표 안의 글자라 boolean 모음에 들지 않습니다. boolean에 드는 값은 true와 false 둘뿐입니다.
• 4번 줄: null은 string 모음 밖입니다. 오류 문장의 'null'이 넣으려는 값의 타입입니다.
• 1 · 5번 줄은 지나갑니다. 0도 number 모음의 값입니다.

흔한 오답은 4번 줄을 빼고 2 · 3번 줄만 쓴 것입니다. null은 어느 타입 자리에나 넣을 수 있다고 본 것입니다. 이 과목 설정(strict)에서 null은 null 모음에만 듭니다(검사 규칙 2). 3번 줄을 빼면 따옴표 안의 'false'를 참·거짓 값으로 본 것입니다.

다시 볼 레슨: 원시 타입과 null·undefined · 타입 적기와 넣을 수 있는지 검사

3번 줄 last의 지금 타입과, 실행 때 runs[n]이 꺼내는 자리를 따로 봅니다.

main.ts:4console.log(last.toFixed(1));                 ^ TypeError: Cannot read properties of undefined (reading 'toFixed')    at main.ts:4:18

검사는 오류 없이 지나갑니다. 검사기는 3번 줄 last의 지금 타입을 원소 타입 number로 봅니다. number 배열에서 몇 번째 자리를 꺼내든 number로 보기 때문입니다. 실행은 4번 줄에서 멈춥니다. n은 3이고 runs의 자리는 0 · 1 · 2라, runs[3]은 없는 자리의 undefined입니다. undefined에서 toFixed를 꺼내려다 TypeError가 납니다. 마지막 날은 runs[n - 1]로 꺼냅니다(4.0).

흔한 오답은 실행 결과를 4.0으로 쓴 것입니다. 검사를 지난 배열 꺼내기는 실행할 때도 값이 있다고 본 것입니다(꺼낸 값은 늘 있다는 생각). 검사기는 그 자리에 정말 값이 있는지 모릅니다(검사 규칙 2). 검사가 3번 줄에서 막힌다고 쓴 답은 검사기가 배열의 길이를 세어 본다고 본 것입니다. 검사기는 값을 셈하지 않고 타입만 봅니다(검사 규칙 1).

JS 다시 보기: 문자열 · 배열에 없는 자리를 꺼내면 오류 없이 undefined가 나옵니다(JS '인덱스와 자르기' · JS '배열과 이름 둘').

다시 볼 레슨: 배열과 튜플

7번 줄에서 daily가 붙는 값과 daily의 선언 타입을 견줘 봅니다. 5번 줄에서는 per와 days를 어떤 연산자로 잇는지 봅니다.

main.ts(7,7): error TS2322: Type 'string' is not assignable to type 'number'.

205

검사는 7번 줄에서 막힙니다. daily의 선언 타입은 적은 number인데 글자 값 '20'을 넣으려 했습니다. 이 TS2322는 number 자리에 글자 값을 넣었다는 뜻입니다. Node는 타입 글자를 지우고 돌립니다. daily는 글자 '20'에 붙고, 5번 줄 '20' + 5에서 +가 5를 이어 붙여 205를 찍습니다.

7번 줄을 고치면 이렇습니다.

function pages(
  per: number,
  days: number,
) {
  return per + days;
}
const daily = 20;
console.log(pages(daily, 5));

25

검사 오류는 0이지만 100이 아니라 25가 찍힙니다. 5번 줄이 per와 days를 곱하지 않고 더해 20 + 5입니다. 100이 되려면 5번 줄을 return per * days;로 고쳐야 합니다. 검사기는 두 매개변수가 number인지만 볼 뿐, 더할지 곱할지는 모릅니다(검사 규칙 1).

흔한 오답 둘은 처음 코드의 실행 결과에서 나옵니다.

• '아무것도 찍지 않는다' — 검사 오류가 있으면 Node가 돌지 않는다고 본 것입니다(검사 오류가 실행을 막는다는 생각).
• 25 — 7번 줄에 number를 적었으니 '20'이 수 20으로 바뀐다고 본 것입니다(타입이 실행 때 남는다는 생각).

Node는 검사하지 않고 타입 글자만 지워 돌아, 값을 막지도 바꾸지도 않습니다(검사 규칙 1). 다른 흔한 오답은 고친 뒤의 실행 결과를 100으로 쓴 것입니다. 검사를 지나면 뜻대로 돈다고 본 것입니다(검사를 지나면 맞다는 생각). 검사를 지난 뒤에도 작은 값으로 돌려 손으로 셈한 값과 맞춰 봅니다.

JS 다시 보기: +는 한쪽이 글자면 둘을 이어 붙여 글자를 만듭니다(JS '수·글자·불리언과 typeof').

다시 볼 레슨: 타입 검사기가 하는 일 · 타입은 실행 전에 지워진다 · 함수의 입력과 출력

검사기가 1번 줄 count의 타입을 어디서 알 수 있을지 봅니다.

main.ts(1,20): error TS7006: Parameter 'count' implicitly has an 'any' type.

10

검사는 1번 줄에서 막힙니다. 이 TS7006은 매개변수 count의 타입이 정해지지 않아 any가 됐다는 뜻입니다. 매개변수의 타입은 부르는 줄의 인자에서 추론되지 않아, 매개변수에는 타입을 적습니다(검사 규칙 3). Node는 타입과 상관없이 돌아 9 + 1인 10을 찍습니다.

흔한 오답은 '지나감'입니다. 4번 줄에서 9를 넘기니 count도 number로 정해진다고 본 것입니다(매개변수도 추론된다는 생각). 1번 줄의 매개변수를 count: number로 적으면 검사를 지납니다.

다시 볼 레슨: 함수의 입력과 출력

보기마다 고친 코드를 Node가 돌린다고 보고, 2번 줄의 + 양쪽에 오는 값이 무엇인지 따라가 봅니다.

검사 오류를 없애는 것은 ①②③④ 넷 모두이고, 실행 결과까지 11500이 되는 것은 ①과 ④입니다. 이 과목이 권하는 고치기는 ①입니다.

function total(
  steps: number,
) {
  return steps + 2500;
}
let morning = 9000;
console.log(total(morning));

11500

①로 고친 코드입니다(정답 접기 안은 폭이 좁아 함수 머리를 나눴습니다). 오류는 5번 줄에서 났지만 까닭은 4번 줄입니다. morning이 글자 '9000'에 붙어, 넘기는 줄에서 number 매개변수에 글자를 넣게 되었습니다. 값을 처음 만드는 줄을 수로 고칩니다.

• ④도 맞는 고치기입니다. Number(morning)이 글자 '9000'을 수 9000으로 바꿔 넘깁니다. 바깥에서 글자로 받은 값이라면 이 꼴로 바꿉니다.
• ②는 덮는 길입니다. any는 검사를 끄는 타입이라 오류만 사라지고, 값은 그대로 글자라 이어 붙습니다.

function total(steps: any) {
  return steps + 2500;
}
let morning = '9000';
console.log(total(morning));

90002500

• ③도 검사는 지나지만 같은 90002500을 찍습니다. 받는 쪽을 틀린 값에 맞춰 타입을 바꿨을 뿐, 글자와 수를 잇는 실수는 그대로입니다.

흔한 오답은 ②나 ③까지 11500 쪽에 고른 것입니다. 검사 오류가 사라지면 실수도 고쳐진 것이라고 본 것입니다(검사를 지나면 맞다는 생각). 덮는 길과 받는 타입 바꾸기는 검사 결과에서 오류만 지우고 값과 실행 결과는 그대로 둡니다.

JS 다시 보기: +는 한쪽이 글자면 둘을 이어 붙여 글자를 만듭니다(JS '수·글자·불리언과 typeof').

다시 볼 레슨: 함수의 입력과 출력 · 타입 오류 읽기

3번 줄과 4번 줄은 둘 다 비워도 되는 매개변수입니다. 비웠을 때 함수 안에 무엇이 오는지 하나씩 봅니다.

shot의 지금 타입은 number, memo의 지금 타입은 string | undefined입니다.

tall 1 undefined

• shot은 기본값 1에서 타입이 number로 정해집니다. 비우면 1이 쓰이니 undefined가 더해지지 않습니다.
• memo는 ?를 붙인 선택 매개변수라 선언 타입 string에 undefined가 더해집니다. 8번 줄처럼 비우면 실행 때 정말 undefined가 옵니다(검사 규칙 2).
• Node는 비운 shot에 기본값 1을, 비운 memo에 undefined를 붙여 tall 1 undefined를 찍습니다.

같은 답으로 치는 꼴: memo를 undefined | string처럼 차례만 바꿔 쓴 것.

흔한 오답은 memo를 string으로 쓴 것입니다. 선택 매개변수도 함수 안에서는 늘 값이 있다고 본 것입니다(꺼낸 값은 늘 있다는 생각). shot을 number | undefined로 쓰면 기본값 매개변수에도 ?처럼 undefined가 더해진다고 본 것입니다. 기본값이 있으면 비워도 값이 있습니다.

다시 볼 레슨: 선택·기본값 매개변수

3번 줄의 콜백이 원소 하나마다 돌려주는 값이 무엇인지 봅니다.

tags의 지금 타입은 string[]입니다.

[ '2잔', '1잔', '3잔' ]

• 3번 줄: map이 받는 콜백 자리에서 c의 타입이 cups의 원소 타입 number로 정해집니다(문맥에서 추론 — 검사 규칙 3). c + '잔'은 수와 글자를 이어 string입니다.
• map은 콜백이 돌려준 값들로 새 배열을 만드니 tags는 string[]입니다.
• Node는 글자 원소를 작은따옴표로 감싸 찍습니다.

흔한 오답은 number[]입니다. map이 만든 배열도 원래 배열의 원소 타입을 그대로 가진다고 본 것입니다. 새 배열의 원소 타입은 콜백이 돌려주는 값의 타입입니다.

JS 다시 보기: map은 원소마다 콜백을 불러 돌려받은 값으로 새 배열을 만듭니다(JS 'map·filter·find').

다시 볼 레슨: 함수 타입과 콜백

4 · 5번 줄에서 읽는 세 이름이 각각 몇 번 줄에서 무엇으로 만들어졌는지 봅니다.

let으로 만든 이름 · const로 만든 수 하나 · const로 만든 객체의 속성을 가릅니다.

검사 오류 없이 지나가고, 4 · 5번 줄의 지금 타입은 이렇습니다.

• menu는 let으로 만들어 첫 값 '녹차'를 넓힌 string입니다.
• shot은 const로 만든 수 하나라 그 값 하나짜리 타입 2입니다.
• cup.size는 const로 만든 객체의 속성이지만 string입니다. const 이름은 다시 붙일 수 없어도 객체의 속성은 다른 값에 다시 붙일 수 있어, 검사기가 넓혀 둡니다(검사 규칙 3).

흔한 오답은 cup.size를 "grande"로 쓴 것입니다. const로 만든 객체라 속성도 그 값 하나라고 본 것입니다(넓어지지 않는다는 생각). menu를 "녹차"로 쓰면 let도 그 값 하나라고 본 것이고, shot을 number로 쓰면 const도 넓힌다고 본 것입니다.

다시 볼 레슨: 적지 않아도 붙는 타입 — 추론

(가)와 (라)는 둘 다 배열이지만, (라)는 칸 수와 칸마다의 타입이 정해져 있습니다.

받는 답: (가) number[] · (나) ? · (다) ...prices: number[] · (라) [string, number]

같은 답으로 치는 꼴:

• (가) · (다) 7단원에서 볼 Array<number>도 같은 타입입니다(...prices: Array<number>).

틀리는 꼴:

• (가) Number[] — 대문자 Number는 number와 다른 타입이라, 꺼낸 값을 셈하는 줄에서 검사가 막힙니다(TS2365). [number]는 수 한 칸짜리 튜플입니다.
• (나) 기본값(qty = 1)도 비워도 되는 매개변수를 만들지만, 기호가 아니라 값이고 비우면 그 값이 쓰입니다.
• (다) ...prices: number — 모은 배열이 아니라 인자 하나의 타입을 적은 것입니다. 나머지 매개변수에 배열이 아닌 타입을 적으면 함수 머리가 TS2370으로 막힙니다. ... 기호를 뺀 prices: number[]은 배열 하나를 인자 하나로 받는 매개변수라, 수를 둘 넘겨 부르면 TS2554로 막힙니다.
• (라) 글자와 수가 섞인 배열 리터럴에서 추론되는 타입은 칸 수와 차례를 정하지 않아 튜플이 아닙니다. [String, Number]는 대문자라 다른 타입입니다.

다시 볼 레슨: 배열과 튜플 · 선택·기본값 매개변수 · 나머지 매개변수

6번 줄 오른쪽 price(2)가 돌려주는 값의 타입이 몇 번 줄에서 정해지는지 거슬러 봅니다.

4번 줄을 return qty * 4500;으로 고칩니다.

function price(
  qty: number,
) {
  return qty * 4500;
}
const sum: number = price(2);
console.log(sum + 2000);

11000

오류는 6번 줄에서 났지만 까닭은 4번 줄입니다. price가 돌려주는 타입은 return에서 정해지는데, 4번 줄이 수 9000에 '원'을 이어 붙여 글자를 돌려줍니다. 그래서 6번 줄에서 number 자리에 글자 값을 넣게 되었습니다. 4번 줄이 수를 돌려주게 고치면 6번 줄 오류도 사라지고 11000이 찍힙니다. 다른 줄만 고쳐서는 11000이 나오지 않습니다.

흔한 오답은 오류가 난 6번 줄에서 : number를 지우는 것입니다. 검사 오류는 사라지지만 sum이 글자 '9000원'에 붙어 7번 줄이 이어 붙입니다.

function price(
  qty: number,
) {
  return qty * 4500 + '원';
}
const sum = price(2);
console.log(sum + 2000);

9000원2000

오류가 난 줄을 고칠 줄로 본 것입니다(오류 줄이 고칠 줄이라는 생각). 검사를 지났어도 결과는 틀립니다(검사를 지나면 맞다는 생각). 오류의 자리에서 그 값의 타입이 정해진 줄로 거슬러 갑니다.

다시 볼 레슨: 함수의 입력과 출력 · 타입 오류 읽기

함수 머리에 매개변수 둘(잔 수 · 한 잔 값)을 차례로 둡니다. 부를 때 비워도 되는 쪽은 둘째입니다.

모범 답입니다.

// 1. 함수 머리
function cost(
  qty: number,
  unit = 4500,
) {
  // 2. 금액 돌려주기
  return qty * unit;
}
// 3. 찍기
console.log(cost(2));
console.log(cost(1, 3500));

9000
3500

cost(3)으로 바꾸면 qty가 3, unit이 기본값 4500이라 13500입니다. 글자를 넘기면 이렇게 막힙니다.

function cost(
  qty: number,
  unit = 4500,
) {
  return qty * unit;
}
console.log(cost('2'));

main.ts(7,18): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

• 다르게 써도 되는 곳: unit: number = 4500처럼 타입과 기본값을 함께 적어도 같습니다. 돌려주는 타입을 ): number {로 적어도 됩니다. 이름은 달라도 됩니다.
• 검사 오류가 0이고, 찍은 화면이 위와 같고, cost(3)도 13500이면 맞습니다.
• 흔한 오답 하나는 한 잔 값을 unit?: number로 쓴 것입니다. 비워도 되지만 비우면 unit이 undefined라, '2. 금액 돌려주기'의 곱하기가 검사에서 막히고 실행은 NaN을 찍습니다(꺼낸 값은 늘 있다는 생각).

function cost(
  qty: number,
  unit?: number,
) {
  return qty * unit;
}
console.log(cost(2));

main.ts(5,16): error TS18048: 'unit' is possibly 'undefined'.

NaN

• 다른 흔한 오답은 qty에 타입을 적지 않은 것입니다(qty,). 부르는 줄의 2에서 추론된다고 본 것입니다(매개변수도 추론된다는 생각). 그러면 TS7006으로 막힙니다.

다시 볼 레슨: 함수의 입력과 출력 · 선택·기본값 매개변수

하위 목표 셋의 주석(1. 값 두기 · 2. 팁 더하는 함수 · 3. 계산하고 찍기)을 먼저 쓰고, 그 아래를 채웁니다.

모범 답입니다.

// 1. 값 두기
const qty = 2;
const unit = 4500;
// 2. 팁 더하는 함수
function addTip(
  price: number,
) {
  return price + 500;
}
// 3. 계산하고 찍기
const cost = qty * unit;
const sum = addTip(cost);
console.log(`주문 ${cost}원`);
console.log(`합계 ${sum}원`);

주문 9000원
합계 9500원

qty를 3으로 바꾸면 cost가 13500, sum이 14000이 됩니다.

• 다르게 써도 되는 곳: const qty: number = 2;⁠처럼 타입을 적어도 됩니다(적지 않아도 첫 값에서 number로 정해집니다). 찍는 줄은 console.log('주문', cost + '원');⁠처럼 써도 같은 줄이 찍힙니다. 함수 머리는 한 줄로 써도 됩니다.
• 검사 오류가 0이고, 찍은 화면이 위와 같고, 잔 수를 3으로 바꾼 결과도 맞으면 맞습니다. 잔 수를 바꿔도 결과가 그대로라면 9000처럼 손으로 셈한 값을 적은 것입니다. 셈은 프로그램에 맡깁니다.
• 흔한 오답은 addTip의 매개변수에 타입을 적지 않은 것입니다(price만). 넘기는 금액이 수이니 추론된다고 본 것입니다(매개변수도 추론된다는 생각). 실행 결과는 같아도 검사가 TS7006으로 막힙니다.

function addTip(price) {
  return price + 500;
}
console.log(addTip(9000));

main.ts(1,17): error TS7006: Parameter 'price' implicitly has an 'any' type.

다시 볼 레슨: 타입 적기와 넣을 수 있는지 검사 · 타입 오류 읽기 · 함수의 입력과 출력