TypeScript란? 설치와 tsc 첫 컴파일

TypeScript 는 자바스크립트(JS) 에 타입을 더한 언어입니다. 같은 코드, 같은 실행, 단 한 가지가 다릅니다 — 코드를 쓸 때 "이 변수가 숫자인지 문자열인지 정해놓고 가는 것". 처음에는 귀찮아 보이지만, 코드가 1만 줄을 넘어가는 순간 TS 가 없으면 죽습니다. 1편은 "왜 TS 가 필요한지" 부터 "내 컴퓨터에서 첫 컴파일을 돌려보기"까지 천천히 갑니다.

왜 TypeScript 인가 — JS 에 타입이 왜 필요할까

JS 에서는 이런 코드가 그대로 실행됩니다.

function add(a, b) {
  return a + b;
}

console.log(add(1, 2));        // 3
console.log(add("1", "2"));    // "12"  ← 문자열 합치기로 동작
console.log(add(1, "2"));      // "12"  ← 의도와 다른 결과
console.log(add(1));           // NaN   ← 두 번째 인자 안 줘도 통과

네 줄 모두 에러 없이 실행됩니다. 문제는 의도와 결과가 다를 때 디버깅에서 발견되거나, 더 나쁘면 사용자에게 노출되어서야 발견된다는 것. TS 는 같은 함수를 이렇게 씁니다.

function add(a: number, b: number): number {
  return a + b;
}

add(1, 2);        // OK → 3
add("1", "2");    // ❌ Argument of type 'string' is not assignable to 'number'
add(1, "2");      // ❌ 같은 이유로 컴파일 단계에서 차단
add(1);           // ❌ Expected 2 arguments, but got 1

"실행 전" 에 에러가 나옵니다. 빨간 줄이 VS Code 에 그어지고, 빌드 단계에서 차단됩니다 — 즉 사용자가 만나기 전에 우리가 먼저 만납니다. 이게 TS 의 핵심 가치입니다.

설치 — Node + tsc

TS 자체는 Node.js 위에서 도는 명령행 도구(tsc — TypeScript Compiler) 형태로 옵니다. 그래서 두 단계로 설치합니다.

1. Node.js LTS 가 설치돼 있어야 합니다 (JS 교재 1편 참고 — Windows·macOS·우분투 OS 별 5분).
2. 그 위에 TypeScript 패키지를 npm 으로 설치.

전역 설치 (시스템 어디서나 tsc)

# 어디서나 tsc 명령을 쓰고 싶을 때
npm install -g typescript
tsc --version
# 예: Version 5.6.3

프로젝트 단위 설치 (권장)

실무에서는 프로젝트마다 TS 버전을 고정합니다. 협업자가 같은 버전을 쓰게 하기 위해서요.

mkdir my-ts-project && cd my-ts-project
npm init -y                    # package.json 생성
npm install --save-dev typescript

# 실행은 npx 로
npx tsc --version

첫 .ts 파일 — tsc 로 컴파일하기

hello.ts 파일을 만들고 다음 한 줄을 넣습니다.

// hello.ts
const greeting: string = "Hello, TypeScript!";
console.log(greeting);

이제 컴파일합니다. TS 는 브라우저나 Node 가 직접 실행하지 못합니다 — 먼저 JS 로 바꿔야 합니다. 그 변환을 컴파일(혹은 트랜스파일) 이라고 부릅니다.

npx tsc hello.ts
# 이 명령으로 같은 폴더에 hello.js 가 생깁니다.

node hello.js
# 출력: Hello, TypeScript!

한 번 hello.js 안을 열어보세요. 타입 표기(: string) 가 지워지고 순수 JS 만 남아 있습니다. TS 의 타입은 실행 시간에는 사라지는 "쓰는 동안에만" 도와주는 라벨이라는 걸 기억하세요.

tsconfig.json — 최소 설정 5줄

파일이 늘어나면 npx tsc hello.ts 처럼 매번 파일명을 적기 귀찮아집니다. tsconfig.json 을 한 번 만들어두면 npx tsc 만 쳐도 프로젝트 전체가 컴파일됩니다.

npx tsc --init
# tsconfig.json 이 100줄 가까운 주석과 함께 생성됩니다

처음에는 다음 5줄짜리 최소 설정으로 시작해도 충분합니다.

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "outDir": "dist"
  },
  "include": ["src/**/*"]
}

이제 src/hello.ts 를 만들고 npx tsc 만 치면 dist/hello.js 가 생깁니다.

교재 20편 로드맵