단원 연습 문제

10단원 '모듈 · 선언 파일 · 설정'의 다섯 레슨에서 여덟 문제를 내고, 앞 단원에서 두 문제를 섞었습니다. 끝의 만들어 보기 둘은 직접 코드를 채우고 짜 보는 문제입니다. 이 단원을 처음 본다면 진단 문항인 문제 1 · 2 · 4 · 6 · 7부터 풀어 보세요. 막히는 문항에 적힌 레슨만 골라 읽어도 됩니다.

문제 1

(진단 · 모듈과 타입 내보내기) menu.ts에 export interface Menu⁠만 들어 있을 때, main.ts에서 type 없이 import { Menu }로 가져오면 검사와 실행 때 각각 어떻게 될까요?

• ① 타입 검사와 Node 실행 모두 문제없이 통과한다
• ② 타입 검사 때는 TS1484로 막히고, Node로 실행하면 menu.ts에서 Menu가 지워져 SyntaxError로 멈춘다
• ③ 타입 검사 때는 통과하고, 실행 때 빈 객체 {}가 넘어온다

문제 2

(진단 · 선언 파일과 @types) 과목 기본 tsconfig.json("types": [])에서 다음 코드를 타입 검사하면 어떤 결과가 나올까요?

console.log(process.version);

• ① Node 내장 기능이므로 검사 오류 0으로 통과한다
• ② process의 선언을 찾지 못해 TS2591 오류가 난다 (@types/node 설치와 "types": ["node"] 설정 필요)
• ③ 문법 오류(TS1294)가 난다

main.ts(1,13): error TS2591: Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add 'node' to the types field in your tsconfig.

문제 3

(선언 파일과 @types) 다음 코드를 타입 검사할 때와 Node로 실행할 때의 결과로 맞는 것은?

declare const bonus: number;
console.log(bonus + 100);

• ① 타입 검사는 통과하지만, 실행 때는 bonus 값이 실제로 없어 ReferenceError로 멈춘다
• ② 타입 검사와 실행 모두 통과하여 100이 출력된다
• ③ 1번 줄에서 타입 검사 오류가 난다

main.ts:2console.log(bonus + 100);            ^ ReferenceError: bonus is not defined    at main.ts:2:13

문제 4

(진단 · DOM 요소의 타입) 다음 브라우저 코드를 타입 검사하면 3번 줄에서 왜 막힐까요?

const input = document
  .querySelector('#qty');
console.log(input.value);

• ① input이 null일 수 있다는 오류(TS18047) 하나만 난다
• ② input이 null일 수 있고(TS18047), Element에는 value 속성이 없다(TS2339)는 두 오류가 함께 난다
• ③ 오류가 나지 않는다

main.ts(3,13): error TS18047: 'input' is possibly 'null'.main.ts(3,19): error TS2339: Property 'value' does not exist on type 'Element'.

문제 5

(DOM 요소의 타입) 다음 코드에서 9번 줄이 타입 검사에서 막히는 까닭은 무엇일까요?

const input = document
  .querySelector('#qty');

if (
  input instanceof
  HTMLInputElement
) {
  const total =
    input.value * 4000;
  console.log(total);
}

• ① input이 여전히 null일 수 있기 때문이다
• ② HTMLInputElement의 value 타입은 언제나 string이라 산술 곱셈(*) 왼쪽 자리에 바로 쓸 수 없기 때문이다 — TS2362
• ③ HTMLInputElement에는 value 속성이 없기 때문이다

main.ts(9,5): error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

문제 6

(진단 · tsconfig.json 읽기) 과목 tsconfig.json의 옵션과 그 역할이 잘못 짝지어진 것은?

• ① "noEmit": true — tsc가 .js 파일을 만들지 않고 타입 검사만 하게 한다
• ② "erasableSyntaxOnly": true — enum이나 매개변수 속성처럼 타입만 지워서는 실행할 수 없는 문법을 TS1294로 막는다
• ③ "verbatimModuleSyntax": true — 모든 파일을 자동으로 .js로 변환해 저장한다

문제 7

(진단 · strict가 켜는 것들) 과목 기본 설정("strict": true)에서 다음 코드를 검사하고 실행한 결과로 맞는 것은?

function half(n) {
  return n / 2;
}
console.log(half(10));

• ① 검사 때는 noImplicitAny 때문에 TS7006으로 막히지만, Node 실행 결과는 5가 찍힌다
• ② 검사 때도 막히고 Node 실행도 멈춘다
• ③ "strict": true라도 n / 2를 보고 n을 number로 추론해 검사를 통과한다

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

5

문제 8

(strict가 켜는 것들) tsconfig.json에 noUncheckedIndexedAccess⁠를 true로 추가로 켰을 때 달라지는 점은 무엇일까요?

• ① 배열 const a = ["커피", "라테"]⁠에서 꺼낸 a[2]의 지금 타입이 string에서 string | undefined로 바뀌어, 확인 없이 a[2].length를 읽으면 TS18048로 막힌다
• ② 배열에 push를 부를 수 없게 된다
• ③ Node가 배열 범위를 벗어날 때 실행을 자동으로 멈춘다

문제 9

(복습 · interface를 지키는 클래스) 다음 코드를 타입 검사하면 어떻게 될까요?

interface Priced {
  calc(qty: number): number;
}

class Menu implements Priced {
  calc(qty) {
    return qty * 4500;
  }
}

• ① Priced 인터페이스에 qty: number가 적혀 있으므로 통과한다
• ② 6번 줄 calc(qty)에서 매개변수 타입을 안 적어 TS7006으로 막힌다
• ③ Menu에 생성자가 없어서 막힌다

main.ts(6,8): error TS7006: Parameter 'qty' implicitly has an 'any' type.

문제 10

(복습 · Promise와 async의 타입) 다음 코드에서 5번 줄이 타입 검사에서 막히는 까닭은 무엇일까요?

let note: string | null = '쿠폰';

if (note !== null) {
  setTimeout(() => {
    console.log(note.length);
  }, 10);
  note = null;
}

• ① let으로 선언한 변수는 if 조건문 안에서도 처음부터 좁혀지지 않고 선언 타입 그대로 남기 때문이다
• ② 콜백은 언제 불릴지 몰라서, 콜백을 만든 뒤 다시 대입되는 let 이름은 콜백 안에서 선언 타입으로 돌아가기 때문이다
• ③ 검사기가 10ms 뒤 실행 시점을 미리 따라가 보고 그때 note의 값이 이미 null로 바뀐 것을 확인했기 때문이다

main.ts(5,17): error TS18047: 'note' is possibly 'null'.

문제 11 (만들어 보기)

(DOM 요소의 타입) #coupon 요소를 찾아 instanceof HTMLInputElement⁠로 좁힌 뒤, 입력 칸의 .value 문자열을 출력하는 브라우저 코드를 검사 오류 0으로 완성해 보세요.

(가) 뼈대 채우기 — ___ 자리에 알맞은 클래스 이름과 속성을 채워 보세요.

// const el = document
//   .querySelector('#coupon');
// if (
//   el instanceof
//   ___
// ) {
//   console.log(el.___);
// }

(나) 백지에서 짜기 — #memo 요소를 찾아 HTMLInputElement로 좁힌 뒤 el.value를 출력하는 코드를 작성해 보세요(검사 오류 0).

const el = document
  .querySelector('#memo');

if (
  el instanceof
  HTMLInputElement
) {
  console.log(el.value);
}

문제 12 (만들어 보기)

(strict가 켜는 것들) 문자열 배열 words: string[]과 인덱스 idx: number를 받아, 그 칸의 문자열이 있으면 글자 수(length)를 돌려주고 없으면(undefined) 0을 돌려주는 함수 lenAt을 작성해 보세요(noUncheckedIndexedAccess⁠를 켜도 통과하도록 undefined를 거릅니다).

(가) 뼈대 채우기 — ___ 자리에 알맞은 타입과 조건을 채워 보세요.

// function lenAt(
//   words: ___,
//   idx: ___,
// ): number {
//   const w = words[idx];
//   if (w !== ___) {
//     return w.length;
//   }
//   return 0;
// }

(나) 백지에서 짜기 — lenAt(["커피", "녹차"], 1)⁠과 lenAt(["커피", "녹차"], 5)⁠의 결과를 차례로 출력해 보세요(2와 0이 찍혀야 합니다).

function lenAt(
  words: string[],
  idx: number,
): number {
  const w = words[idx];
  if (w !== undefined) {
    return w.length;
  }
  return 0;
}

const list = ['커피', '녹차'];
console.log(lenAt(list, 1));
console.log(lenAt(list, 5));

2
0