Ch 03. TypeScript 생태계 한눈에 보기

TypeScript를 실행하는 방법은 하나가 아닙니다. tsc, tsx, Bun, Deno — 각각 역할과 특성이 다릅니다. 어떤 상황에서 무엇을 쓰면 좋은지 정리합니다.

tsc — 공식 TypeScript 컴파일러

Microsoft가 만든 공식 컴파일러입니다. TypeScript 파일을 JavaScript로 변환합니다.

# 설치npm install -g typescript# 버전 확인tsc --version# Version 5.8.3# 파일 컴파일tsc hello.ts# 프로젝트 전체 빌드tsc# 감시 모드 (파일 변경 시 자동 재빌드)tsc --watch

tsc는 타입 검사와 컴파일을 모두 담당합니다. 빌드 결과물인 .js 파일을 Node.js로 실행합니다.

tsc src/index.ts --outDir distnode dist/index.js

단점은 두 단계가 필요하다는 점입니다 — 컴파일 후 실행. 개발 중에 번거롭습니다.

tsx — 빠른 개발용 TypeScript 실행기

tsx는 tsc로 먼저 컴파일하지 않고 TypeScript 파일을 직접 실행합니다. 내부적으로 esbuild를 사용해 빠릅니다.

# 설치npm install -g tsx# 바로 실행tsx src/index.ts# 감시 모드tsx watch src/index.ts

타입 검사를 하지 않습니다. 빠른 실행이 목적입니다. 개발 중 빠른 피드백 루프에 적합하고, 타입 검사는 별도로 tsc --noEmit으로 합니다.

// package.json{  "scripts": {    "dev": "tsx watch src/index.ts",    "typecheck": "tsc --noEmit",    "build": "tsc"  }}

이 책에서 Node.js 백엔드 개발 시 주로 tsx를 사용합니다.

ts-node — Node.js 통합 실행기

tsx보다 먼저 등장한 도구입니다. Node.js에 TypeScript 지원을 추가합니다.

npm install -g ts-nodets-node src/index.ts

현재는 tsx가 더 빠르고 설정이 간단해 새 프로젝트에서는 tsx를 권장합니다.

Bun — TypeScript 네이티브 런타임

Bun은 Node.js 대체를 목표로 만들어진 JavaScript/TypeScript 런타임입니다. TypeScript를 별도 설정 없이 바로 실행합니다.

# 설치 (macOS/Linux)curl -fsSL https://bun.sh/install | bash# TypeScript 파일 직접 실행bun run src/index.ts# 패키지 설치 (npm보다 빠름)bun install# 빌드bun build src/index.ts --outdir dist

Bun은 런타임 + 패키지 매니저 + 번들러를 하나로 합쳤습니다. 속도가 Node.js보다 빠르다고 알려져 있습니다.

이 책은 Node.js 22 + npm 기반으로 진행합니다. Bun을 선호한다면 대부분의 코드를 그대로 사용할 수 있습니다.

Deno — 보안 중심 TypeScript 런타임

Deno는 Node.js 창시자 Ryan Dahl이 새로 만든 런타임입니다. TypeScript를 네이티브로 지원하고, 샌드박스 보안 모델을 채택합니다.

# 설치curl -fsSL https://deno.land/install.sh | sh# 실행 (네트워크 접근 명시적 허용 필요)deno run --allow-net src/index.ts

Node.js 생태계와 호환성이 완전하지 않아 기존 npm 패키지를 그대로 쓰기 어렵습니다. 새 프로젝트에서 실험적으로 사용하거나, Deno Deploy 같은 Deno 생태계를 활용할 때 선택합니다.

프레임워크별 TypeScript 지원 현황

TypeScript를 쓰는 주요 프레임워크들의 지원 수준입니다.

프론트엔드

# React (Vite 사용)npm create vite@latest my-app -- --template react-ts# Next.js (기본 TypeScript)npx create-next-app@latest my-app# Vue 3npm create vue@latest my-app   # 프로젝트 생성 시 TypeScript 선택

React는 @types/react 패키지로 타입을 지원합니다. Next.js와 Nuxt 3는 TypeScript를 기본값으로 사용합니다.

백엔드

# NestJS (TypeScript 퍼스트)npm i -g @nestjs/clinest new my-app# Fastify + TypeScriptnpm install fastify @types/node# Express + TypeScriptnpm install express @types/express @types/node

NestJS는 TypeScript 없이 쓰는 게 오히려 어렵습니다. Angular처럼 처음부터 TypeScript를 전제하고 설계된 프레임워크입니다.

테스트

# Vitest (이 책에서 사용)npm install -D vitest# Jest + TypeScriptnpm install -D jest @types/jest ts-jest

Vitest는 Vite 기반 테스트 러너로, TypeScript를 별도 설정 없이 지원합니다. 이 책에서 테스트 챕터는 Vitest를 사용합니다.

타입 정의 패키지 (@types/*)

Node.js, Express, React 같은 JavaScript 라이브러리는 TypeScript 타입 정보가 없습니다. @types/* 패키지가 타입 정보를 제공합니다.

# Node.js 내장 모듈 타입npm install -D @types/node# Express 타입npm install -D @types/express# 이미 TypeScript 타입이 포함된 패키지는 @types 불필요npm install zod      # 타입 내장npm install axios    # 타입 내장

패키지를 설치할 때 해당 패키지에 타입이 포함되어 있는지 npmjs.com에서 확인하면 됩니다. 패키지 이름 옆에 TS 배지가 있으면 타입 내장, DT 배지가 있으면 @types/*가 별도로 있다는 표시입니다.

정리

이 책의 개발 환경은 Node.js 22 + tsc + tsx 조합입니다. 다음 PART에서 직접 설치합니다.