TypeScript 시작하기 — 설치, tsconfig, 첫 컴파일

TypeScript는 JavaScript에 정적 타입 시스템 을 얹은 언어입니다. 결국 실행할 때는 JavaScript로 변환되지만, 개발 단계에서 타입 오류를 잡아 줍니다.

왜 TypeScript인가

JavaScript만으로도 충분히 동작하는 코드를 작성할 수 있지만, 프로젝트가 커질수록 "이 변수에 뭐가 들어오지?"라는 고민이 많아집니다. TypeScript는 그 고민을 컴파일 타임 에 해결해 줍니다.

면접에서도 "왜 TypeScript를 쓰나요?"라고 자주 물어보는데, 핵심은 이 세 가지입니다.

**타입 안전성 **: 런타임 에러를 컴파일 타임에 잡는다
** 자동 완성과 리팩터링 **: IDE가 타입 정보를 기반으로 코드 제안을 해 준다
** 문서화 효과 **: 함수 시그니처만 봐도 어떤 값이 오가는지 파악 가능

설치 방법

글로벌 설치

BASH

# npm으로 전역 설치
npm install -g typescript

# 설치 확인
tsc --version

프로젝트별 설치 (권장)

BASH

# 프로젝트 초기화
npm init -y

# 개발 의존성으로 설치
npm install --save-dev typescript

# npx로 실행
npx tsc --version

프로젝트마다 TypeScript 버전이 다를 수 있으니, ** 프로젝트별 설치 **를 권장합니다. 글로벌 설치는 간단한 실험용으로만 쓰는 게 좋습니다.

tsconfig.json 생성

BASH

# tsconfig.json 자동 생성
npx tsc --init

이 명령어를 실행하면 기본 옵션이 잔뜩 주석 처리된 tsconfig.json 파일이 생깁니다. 처음에는 아래처럼 핵심 옵션만 두면 충분합니다.

JSON

{
  "compilerOptions": {
    "target": "ES2020",        // 변환할 JS 버전
    "module": "commonjs",      // 모듈 시스템
    "strict": true,            // 엄격 모드 (권장)
    "outDir": "./dist",        // 컴파일된 JS 출력 폴더
    "rootDir": "./src",        // 소스 파일 폴더
    "esModuleInterop": true,   // CommonJS 모듈 호환
    "skipLibCheck": true       // 선언 파일 검사 생략 (빌드 속도 향상)
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

주요 옵션 한줄 정리

옵션	역할
`target`	컴파일 결과물의 ECMAScript 버전
`module`	모듈 시스템 (commonjs, esnext 등)
`strict`	모든 엄격 타입 검사 활성화
`outDir`	컴파일된 `.js` 파일의 출력 경로
`rootDir`	소스 `.ts` 파일의 루트 경로

첫 번째 TypeScript 파일

TYPESCRIPT

// src/hello.ts
// 매개변수와 반환값에 타입을 명시
function greet(name: string): string {
  return `안녕하세요, ${name}님!`;
}

// 타입이 맞으면 정상 동작
console.log(greet('타입스크립트'));

// 타입이 틀리면 컴파일 에러
// greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'

컴파일과 실행

BASH

# 컴파일 (tsconfig.json 기준으로 동작)
npx tsc

# 특정 파일만 컴파일
npx tsc src/hello.ts

# 컴파일된 JS 실행
node dist/hello.js

워치 모드

BASH

# 파일 변경 시 자동 재컴파일
npx tsc --watch

개발 중에는 --watch 모드를 켜 두면 저장할 때마다 자동으로 컴파일해 줍니다.

ts-node로 직접 실행

매번 컴파일 → 실행 두 단계를 거치기 번거로우면 ts-node를 쓸 수 있습니다.

BASH

# ts-node 설치
npm install --save-dev ts-node

# 바로 실행 (컴파일 단계 생략)
npx ts-node src/hello.ts

ts-node는 내부적으로 컴파일을 해서 실행하는 것이라, 프로덕션에서는 미리 컴파일된 JS를 실행하는 게 맞습니다.

컴파일 결과 비교

TypeScript가 어떻게 JavaScript로 변환되는지 보면 이해가 빠릅니다.

TYPESCRIPT

// TypeScript (입력)
function add(a: number, b: number): number {
  return a + b;
}

JAVASCRIPT

// JavaScript (출력 — target: ES2020)
"use strict";
function add(a, b) {
  return a + b;
}

타입 정보는 완전히 제거 됩니다. TypeScript 타입은 런타임에 존재하지 않습니다. 이것을 타입 이레이저(Type Erasure) 라고 합니다.

면접 포인트: "TypeScript 타입은 런타임에 존재하나요?"라는 질문에 "아니요, 컴파일 타임에만 존재하고 런타임에는 모두 제거됩니다"라고 답하면 됩니다.

프로젝트 구조 예시

PLAINTEXT

my-project/
├── src/
│   ├── hello.ts
│   └── utils.ts
├── dist/           # 컴파일 결과물 (git에 포함하지 않음)
├── node_modules/
├── package.json
├── tsconfig.json
└── .gitignore      # dist/ 추가

.gitignore에 dist/ 폴더를 추가하는 것을 잊지 마세요.

정리

TypeScript는 JavaScript + 정적 타입 시스템이다
npm install --save-dev typescript로 프로젝트별 설치하는 것이 좋다
tsconfig.json은 npx tsc --init으로 생성하고 strict: true를 켜 두자
타입은 컴파일 타임에만 존재하며, 런타임에는 모두 사라진다
개발 편의를 위해 ts-node나 --watch 모드를 활용하자