시작하기

TypeScript는 JavaScript에 정적 타입을 더한 언어입니다. TypeScript 코드는 컴파일러 tsc가 타입을 검사한 뒤 일반 JavaScript로 바꾸고, 그 결과를 Node.js나 브라우저가 실행합니다. 타입은 실행 전에만 쓰이고 실행 결과물에는 남지 않는다는 점을 먼저 기억해 두면 이후 내용이 훨씬 쉽게 이해됩니다.

이 장에서는 Node.js와 TypeScript를 설치하고, tsconfig.json으로 프로젝트를 설정하고, 코드를 실행하는 몇 가지 방법과 편집기 설정을 살펴봅니다.

Node.js 설치

TypeScript 컴파일러는 npm 패키지로 배포되므로 먼저 Node.js가 필요합니다. Node.js 공식 사이트에서 LTS(장기 지원) 버전을 내려받거나, 여러 버전을 오가야 한다면 nvm 같은 버전 관리 도구를 쓰는 것이 좋습니다. 설치가 끝나면 터미널에서 버전을 확인합니다.

node --version
npm --version

프로젝트 만들기와 TypeScript 설치

TypeScript는 전역으로 설치하기보다 프로젝트마다 개발 의존성으로 설치하는 것을 권장합니다. 그래야 팀원 모두가 같은 컴파일러 버전을 쓰고, CI에서도 같은 결과를 얻습니다.

mkdir hello-ts
cd hello-ts
npm init -y
npm install --save-dev typescript
npx tsc --version

npx tsc는 프로젝트의 node_modules에 설치된 컴파일러를 실행합니다. 이제 설정 파일을 만듭니다.

npx tsc --init

tsconfig.json 이해하기

tsc --init은 주석이 달린 tsconfig.json을 만들어 줍니다. 처음에는 다음처럼 핵심 옵션만 남겨 두고 시작해도 충분합니다.

{
  "compilerOptions": {
    "target": "es2022",
    "module": "nodenext",
    "strict": true,
    "rootDir": "src",
    "outDir": "dist",
    "sourceMap": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

새 프로젝트라면 strict는 처음부터 켜 두는 것이 좋습니다. 나중에 켜면 고쳐야 할 오류가 한꺼번에 쏟아지기 때문입니다. 옵션 전체 목록은 TSConfig 레퍼런스에 정리되어 있습니다.

첫 프로그램 작성과 실행

src/index.ts 파일을 만듭니다.

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

const message = greet("TypeScript");
console.log(message);

name: string이 타입 표기입니다. greet(42)처럼 숫자를 넘기면 컴파일 단계에서 오류가 납니다. module을 nodenext로 두었다면 package.json에 "type": "module"을 추가해 출력 파일이 ES 모듈로 실행되게 합니다. 이제 컴파일하고 실행합니다.

npx tsc
node dist/index.js

tsc는 src의 파일을 검사해 dist/index.js를 만듭니다. 타입 오류가 있으면 메시지를 출력하지만, 기본 설정에서는 그래도 JavaScript 파일을 생성합니다. 오류가 있을 때 출력을 막고 싶다면 noEmitOnError 옵션을 켭니다.

빌드 없이 바로 실행하기

개발 중에는 매번 컴파일하고 실행하는 과정이 번거롭습니다. tsx는 .ts 파일을 바로 실행해 주는 도구입니다. 다만 타입 검사는 하지 않고 타입만 지운 뒤 실행하므로, 타입 검사는 tsc --noEmit으로 따로 돌려야 합니다.

npm install --save-dev tsx
npx tsx src/index.ts
npx tsx watch src/index.ts
npx tsc --noEmit

최근 Node.js는 타입 표기를 지우고 .ts 파일을 직접 실행하는 기능도 제공합니다. 다만 enum처럼 JavaScript로 변환이 필요한 문법은 지원 범위가 제한되므로, 사용 전 쓰는 Node.js 버전의 문서를 확인하는 것이 좋습니다.

package.json에 스크립트를 등록해 두면 명령을 기억할 필요가 없습니다.

{
  "type": "module",
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "build": "tsc",
    "typecheck": "tsc --noEmit",
    "start": "node dist/index.js"
  }
}

편집기 설정

Visual Studio Code는 TypeScript 언어 서비스를 내장하고 있어 별도 확장 없이도 자동 완성, 오류 표시, 이름 바꾸기, 정의로 이동을 지원합니다. 몇 가지를 설정해 두면 더 편합니다.

• 명령 팔레트의 TypeScript: Select TypeScript Version에서 "Use Workspace Version"을 고르면 편집기와 npx tsc가 같은 컴파일러를 씁니다.
• 변수 위에 마우스를 올리면 추론된 타입이 보입니다. 타입이 예상과 다를 때 가장 먼저 확인할 곳입니다.
• 오류 메시지는 아래에서 위로 읽으면 원인을 찾기 쉽습니다. 마지막 줄이 가장 구체적인 이유인 경우가 많습니다.
• ESLint와 Prettier를 함께 쓰면 스타일과 흔한 실수를 자동으로 잡을 수 있습니다.

WebStorm 같은 JetBrains 편집기도 TypeScript를 기본 지원하며, 설치 없이 시험해 보고 싶다면 브라우저에서 바로 실행되는 TypeScript Playground를 쓰면 됩니다.

정리

• TypeScript는 타입을 검사한 뒤 JavaScript로 변환되며, 타입은 실행 시점에는 남지 않습니다.
• TypeScript는 프로젝트마다 npm install --save-dev typescript로 설치하고 npx tsc로 실행합니다.
• tsconfig.json의 strict는 처음부터 켜 두는 것이 좋습니다.
• 빌드는 tsc, 개발 중 빠른 실행은 tsx, 타입 검사는 tsc --noEmit으로 나누어 쓰면 편합니다.