05. TypeScript: 더 안전한 자바스크립트

"자바스크립트가 자유로운 영혼의 예술가라면, 타입스크립트는 꼼꼼한 건축가입니다."

1. Why: 자유분방함의 대가 (Runtime Error)

자바스크립트(JS)는 너무 착해서 탈입니다. 말도 안 되는 코드를 짜도 에러를 내지 않고 실행해버립니다.

// JavaScript의 흔한 실수
function add(a, b) {
    return a + b;
}

console.log(add(1, "2")); // 결과: "12" (???)
// 숫자를 기대했는데 문자가 나와서, 나중에 프로그램이 펑 터집니다.

문제: 코드를 짤 때는 조용하다가, 사용자가 버튼을 클릭하는 순간(Runtime) 에러가 터집니다.
해결: 작성하는 순간(Compile time) 빨간 줄을 그어주는 감독관이 필요합니다. 그게 바로 TypeScript입니다.

2. Python 개발자를 위한 1:1 비교

여러분은 이미 타입을 알고 있습니다. 최신 파이썬의 Type Hint와 개념이 똑같습니다.

구분	Python (Type Hint)	TypeScript
변수	`name: str = "Kim"`	`let name: string = "Kim";`
함수	`def add(a: int) -> int:`	`function add(a: number): number { }`
구조	`class User:` or `TypedDict`	`interface User { }`

차이점: 파이썬의 타입 힌트는 "지켜주면 고맙고 아니면 말고(무시 가능)" 수준이지만, TypeScript는 타입을 어기면 아예 실행(변환)을 안 시켜줍니다. (더 엄격함)

3. Node.js와의 연결고리 (중요!)

앞서 배운 Node.js의 '번역가' 역할이 여기서 빛을 발합니다.

TypeScript 파일(.ts): 브라우저는 이 파일을 절대 모릅니다.
Node.js (번역): npm run build를 하면 TS 문법 검사를 마치고, 브라우저가 아는 JS 파일(.js)로 변환합니다.
Browser: 변환된 JS를 실행합니다.

"TypeScript는 개발자를 위한 언어이고, JavaScript는 브라우저를 위한 언어입니다."

4. Interface: AI와의 계약서 (The Contract)

AI 시대에 TypeScript를 써야 하는 진짜 이유는 바로 '소통의 명확성' 때문입니다. Interface는 나와 AI, 혹은 프론트엔드와 백엔드 사이의 법적 효력이 있는 계약서입니다.

❌ Bad Prompt (JS 방식)

"유저 정보를 받아서 화면에 띄워주는 함수 짜줘." AI의 고민: '유저 정보에 이름은 있나? 나이는? 주소는? 에라 모르겠다 대충 짜자.' (환각 발생 확률 높음)

⭕ Good Prompt (Visible Thinking 방식)

"머릿속의 생각을 다이어그램으로 그리고, 도면을 AI에게 던져주세요."

classDiagram
    class User {
        +id: number
        +username: string
        +email: string
        +level: "Basic" | "Pro" | "Admin"
        +isActive: boolean
    }

AI에게 할 말: "위의 클래스 다이어그램을 바탕으로 User 인터페이스를 정의하고, 프로필 카드 컴포넌트를 만들어줘. 단, level은 지정된 3가지 문자열만 허용해줘."

AI의 반응: '데이터 구조가 완벽하군. level이 Union Type이니 오타가 나지 않게 처리해야겠어.' (정확도 100%)

5. Visible Thinking: 빨간 줄의 안도감

TypeScript를 쓰면 VS Code에 빨간 밑줄이 자주 뜹니다. 이것은 귀찮은 게 아니라 축복입니다.

JS: 오타를 내면 실행해봐야 압니다. (사용자가 발견함 😱)
TS: 오타를 내면 저장하기도 전에 알려줍니다. (내가 발견함 😎)

// AI가 작성해준 인터페이스
interface User {
    id: number;
    username: string;
    level: "Basic" | "Pro" | "Admin";
}

// 👨‍💻 여러분이 작성한 코드
const user: User = { 
    id: 1, 
    username: "ideabong",
    level: "Master"  // 🚨 Error: "Master"는 허용된 레벨이 아닙니다!
};

🧠 AI Native Activity: 설계 먼저, 코딩 나중에

이제부터 코딩 순서가 바뀝니다.

Define (설계): 들어올 데이터의 모양(mermaid / interface)을 먼저 정의합니다.
Prompt (지시): AI에게 설계도를 던져주고 "이 모양대로 로직을 짜줘"라고 합니다.
Verify (검토): AI가 짠 코드에 빨간 줄이 없는지만 확인합니다.

이것이 바로 Architect(설계자)로서 개발하는 방식입니다.

🕹️ 실습: 3분 만에 빨간 줄 만나기 (Type Check)

VS Code만 있으면 TypeScript의 강력함을 바로 체험할 수 있습니다.

Step 1. 방어막 가동 (.ts)

VS Code에서 safety.ts 파일을 만듭니다. (확장자가 .ts인 것이 핵심!)

Step 2. 에러 유발하기 (Red Line)

아래 코드를 적어보세요.

let age: number = 25;
age = "스물다섯"; // 🚨 빨간 줄 등장!

마우스를 빨간 줄 위에 올려보세요.
메시지: Type 'string' is not assignable to type 'number'.
의미: 파이썬처럼 실행하다가 죽는 게 아니라, 저장하기도 전에 막아줍니다.

Step 3. AI와 계약서 쓰기 (Interface)

아래 코드를 입력하고 myHero. 뒤에 점을 삭제하고 다시 찍어보세요.

interface Hero {
  name: string;
  power: number;
}

const myHero: Hero = { 
  name: "Ironman", 
  power: 100 
};

console.log(myHero. ); // 점(.)을 찍는 순간!

결과: name과 power가 자동 완성 목록에 뜹니다. 오타를 낼 수가 없습니다. 이것이 개발 경험(DX)의 신세계입니다.