개발 환경 설정

TypeScript를 쓰려면 컴파일러 tsc 와 설정 파일 tsconfig.json 이 필요합니다. 한 번 환경을 잘 갖춰 두면 이후 강좌의 모든 예제를 직접 돌려 볼 수 있습니다.

학습 목표

• tsc 컴파일러를 설치하고 실행할 수 있다.
• tsconfig.json 의 핵심 옵션을 이해한다.
• TS 파일을 컴파일하고 실행하는 흐름을 안다.
• 에디터(VS Code)의 타입 지원을 활용한다.

tsc 설치

TypeScript 컴파일러는 npm 패키지로 설치합니다. 프로젝트 단위로 설치하는 것을 권장합니다.

npm init -y
npm install -D typescript
npx tsc --version

전역 설치도 가능하지만, 프로젝트마다 버전이 다를 수 있으므로 -D(개발 의존성)로 두는 편이 안전합니다.

tsconfig.json 만들기

설정 파일은 명령 한 줄로 생성합니다.

npx tsc --init

생성된 파일에서 자주 쓰는 핵심 옵션은 다음과 같습니다.

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

옵션	역할
target	변환할 JS 버전 (예: ES2020)
module	출력할 모듈 형식
strict	엄격한 타입 검사 묶음 (강력 추천)
outDir	컴파일 결과 JS가 나올 폴더
rootDir	소스 파일 루트
esModuleInterop	CommonJS 모듈을 깔끔하게 import
skipLibCheck	라이브러리 타입 검사 생략(빌드 속도↑)

💡 TIP — strict: true 는 처음에는 까다롭게 느껴지지만, TypeScript의 진짜 가치를 누리게 해 줍니다. 새 프로젝트라면 처음부터 켜 두세요.

컴파일과 실행

src/index.ts 를 만들고 컴파일해 봅시다.

// src/index.ts
const message: string = '안녕, TypeScript!';
console.log(message);

npx tsc          # tsconfig.json 기준으로 전체 컴파일 → dist/
node dist/index.js

코드를 고칠 때마다 자동으로 다시 컴파일하려면 --watch 를 씁니다.

npx tsc --watch

컴파일 없이 바로 실행하기

개발 중에는 매번 컴파일하기 번거롭습니다. tsx 같은 도구로 TS 파일을 곧바로 실행할 수 있습니다.

npm install -D tsx
npx tsx src/index.ts

⚠️ 주의 — tsx 는 빠르게 실행만 해 줄 뿐 타입 검사는 건너뜁니다. 타입 오류까지 확인하려면 별도로 npx tsc --noEmit 을 돌려 검사만 수행하세요.

에디터 지원

VS Code는 TypeScript를 기본으로 지원합니다. 별도 확장 없이도 다음을 제공합니다.

• 실시간 타입 오류 표시 (빨간 줄)
• 속성·함수 자동완성
• 마우스를 올리면 타입 정보 표시
• F2로 안전한 이름 변경(리팩터링)

코드를 입력하는 동안 에디터가 보여 주는 안내만 잘 읽어도 학습이 빨라집니다.

요약

tsc 를 설치하고 tsconfig.json 에서 strict, target, outDir 같은 핵심 옵션을 설정합니다. tsc 로 컴파일하거나 tsx 로 바로 실행하며, 타입만 검사할 땐 tsc --noEmit 을 씁니다. VS Code의 타입 지원을 적극 활용하세요.