TypeScript란? — 타입으로 안전한 JavaScript

JavaScript의 한계

// JavaScript — 런타임에서야 오류 발견
function greet(user) {
    return "안녕하세요, " + user.name + "님!";
}

greet({ name: "철수" });   // ✅ 정상
greet("철수");             // ❌ 런타임 오류: user.name is undefined
greet();                   // ❌ 런타임 오류: Cannot read properties of undefined

TypeScript는 이런 오류를 코드 작성 시점에 발견합니다.

---

TypeScript = JavaScript + 타입

// TypeScript — 컴파일 시점에 오류 발견
interface User {
    name: string;
}

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

greet({ name: "철수" });   // ✅
greet("철수");             // ❌ 컴파일 오류: string은 User 타입이 아님
greet();                   // ❌ 컴파일 오류: 인자가 필요함

---

TypeScript가 주는 이점

flowchart LR
    subgraph TS["TypeScript 효과"]
        E1["자동완성\n(IDE 지원 강화)"]
        E2["오류 조기 발견\n(컴파일 시점)"]
        E3["문서화\n(타입이 곧 문서)"]
        E4["리팩토링 안전\n(변경 영향 범위 파악)"]
    end

---

개발 환경 설정

# Node.js가 설치되어 있다고 가정

# TypeScript 전역 설치
npm install -g typescript

# 버전 확인
tsc --version
# Version 5.4.0

# 새 프로젝트
mkdir my-ts-project
cd my-ts-project
npm init -y

# TypeScript 설치
npm install -D typescript @types/node

# tsconfig.json 생성
npx tsc --init

---

tsconfig.json 기본 설정

{
  "compilerOptions": {
    "target": "ES2022",           // 출력 JavaScript 버전
    "module": "commonjs",         // 모듈 시스템
    "strict": true,               // 엄격한 타입 검사
    "outDir": "./dist",           // 컴파일 출력 폴더
    "rootDir": "./src",           // 소스 폴더
    "esModuleInterop": true       // ES 모듈 호환
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

---

첫 TypeScript 파일

// src/index.ts
const message: string = "Hello, TypeScript!";
console.log(message);

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

console.log(add(1, 2));   // 3
// console.log(add("1", 2));  // ❌ 컴파일 오류

# 컴파일
npx tsc

# 실행
node dist/index.js

# 개발 중: ts-node로 바로 실행
npm install -D ts-node
npx ts-node src/index.ts

---

TypeScript 컴파일 과정

flowchart LR
    TS[".ts 파일\nTypeScript"]
    CHECK["타입 검사\n(오류 발견)"]
    JS[".js 파일\nJavaScript"]
    NODE["Node.js / 브라우저\n실행"]

    TS -->|"tsc"| CHECK --> JS --> NODE

TypeScript는 런타임에 존재하지 않습니다. 타입 정보는 컴파일 후 제거됩니다.

---

JavaScript vs TypeScript

// JavaScript
function calculatePrice(price, discount) {
    return price - price * discount;
}

// TypeScript
function calculatePrice(price: number, discount: number): number {
    return price - price * discount;
}

calculatePrice(10000, 0.1);    // ✅ 9000
calculatePrice(10000, "10%"); // ❌ 컴파일 오류

---

정리

항목	JavaScript	TypeScript
타입	동적 (런타임 결정)	정적 (컴파일 시 결정)
오류 발견	런타임	컴파일 타임
IDE 지원	보통	강력한 자동완성
학습 곡선	낮음	중간
대규모 프로젝트	어려움	적합

다음 편에서는 기본 타입 — TypeScript의 원시 타입, 배열, 튜플, 열거형을 배웁니다.