이 편에서 만드는 파일

이 편은 개념 편이라 계속 남는 결과물 파일이 없습니다. 비교 실습에 쓸 임시 파일 2개만 만들고, 실습이 끝나면 지워도 됩니다. expense-tracker/ 프로젝트는 02편에서 새로 만듭니다.

ts-demo/          (임시 폴더, 이 편에서만 사용)
├── bug.js
└── bug.ts

개념 정리

JS 동적 타입의 한계

JavaScript 변수는 어떤 타입의 값이든 담을 수 있고, 함수는 인자로 어떤 값이 오든 일단 실행됩니다. 값의 타입이 실제로 맞는지는 코드를 작성하는 시점이 아니라 그 줄이 실행되는 순간 결정됩니다. 숫자를 기대하는 자리에 문자열이 들어와도 프로그램이 멈추지 않고, 계산 결과만 조용히 틀리는 경우가 자주 있습니다.

컴파일타임과 런타임 구분

TypeScript 코드는 브라우저나 Node.js에서 직접 실행되지 않습니다. 컴파일타임에 타입을 검사한 뒤 일반 JavaScript로 변환되어야 실행됩니다. 이 편의 실습에서는 tsc(TypeScript 컴파일러)로 컴파일타임 검사만 따로 실행해 봅니다.

TypeScript 7 네이티브 컴파일러

TypeScript 7부터 컴파일러 본체가 Go로 재작성되어 기존 JavaScript 구현보다 훨씬 빠르게 동작합니다. 타입 검사 결과(어떤 코드가 오류인지, 어떤 코드가 정상인지)는 이전 버전과 동일하게 유지되고, 속도만 크게 개선되었습니다. 이 과목의 모든 실습은 TypeScript 7 기준으로 진행합니다.

편집기 통합(IntelliSense)

VS Code는 tsc를 직접 실행하지 않아도 TypeScript 서버를 백그라운드에서 계속 띄워 두고, 코드를 입력하는 즉시 같은 타입 검사 결과를 빨간 밑줄과 툴팁으로 보여줍니다. 자동 완성 목록에 프로퍼티나 메서드 이름이 뜨는 것, 함수 위에 마우스를 올리면 매개변수 타입이 보이는 것도 모두 같은 서버가 하는 일입니다. tsc를 터미널에서 실행하는 것은 이 검사를 한 번에, 파일 전체에 대해, 자동화된 방식으로 확인하는 것입니다.

실습

mkdir ts-demo
cd ts-demo
npm init -y
npm install --save-dev typescript

// bug.js
function calculateTotal(prices) {
  return prices.reduce((sum, price) => sum + price, 0)
}
 
const total = calculateTotal([1000, 2000, '3000'])
console.log('합계:', total)

node bug.js

합계: 30003000

// bug.ts
function calculateTotal(prices: number[]): number {
  return prices.reduce((sum, price) => sum + price, 0)
}
 
const total = calculateTotal([1000, 2000, '3000'])
console.log('합계:', total)

npx tsc --noEmit bug.ts

bug.ts:5:33 - error TS2345: Argument of type '(string | number)[]' is not assignable to parameter of type 'number[]'.
  Type 'string | number' is not assignable to type 'number'.
    Type 'string' is not assignable to type 'number'.

5 const total = calculateTotal([1000, 2000, '3000'])
                                ~~~~~~~~~~~~~~~~~~~~

확인

• node bug.js는 오류 없이 실행되지만 합계가 30003000으로 틀립니다.
• npx tsc --noEmit bug.ts는 실행 없이 5행에서 타입 오류를 출력합니다.
• VS Code로 bug.ts를 열면 '3000' 아래에 빨간 밑줄이 바로 나타납니다. tsc를 실행하기도 전에 편집기가 같은 오류를 미리 보여주는 것입니다.

직접 해보기

1. bug.js의 배열에서 문자열 '3000'을 지우고 숫자 3000으로 바꿔 다시 실행한 뒤, 합계가 6000으로 정확하게 나오는지 확인합니다.
2. bug.ts의 calculateTotal 함수에서 : number[] 애너테이션을 지우고 다시 npx tsc --noEmit bug.ts를 실행해, 오류가 사라지는지 아니면 형태만 바뀌는지 관찰합니다.

자주 하는 실수

확인 문제

참고 자료

• TypeScript — Announcing TypeScript 7.0 
• TypeScript Handbook — TypeScript for JavaScript Programmers