Ch.15 TypeScript 기초 — AI가 이해하는 타입

타입이 왜 필요한가?

JavaScript의 동적 타입이 일으키는 런타임 에러를 이해한다TypeScript가 무엇인지, 왜 필요한지 설명할 수 있다기본 타입(string, number, boolean)과 타입 추론을 사용할 수 있다

AI가 만든 코드에서 에러가 터진다?

AI에게 함수를 만들어달라고 했더니 잘 돌아갑니다. 그런데 다른 데이터를 넣으니 갑자기 undefined가 뜹니다. 왜?

타입 없이 코드를 쓰면 어떤 일이 벌어질까?

TypeScript — JavaScript에 타입을 더해 컴파일 시점에 에러를 잡아주는 언어입니다.

article

핵심 내용

JavaScript는 자유롭습니다 하지만 그 자유에는 대가가 있습니다

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

add(1, 2);       // 3 ✅
add("1", 2);     // "12" 😱 — 문자열 연결!!
add(null, 2);    // 2 — null이 0으로 변환
add(undefined);  // NaN

런타임 에러의 위험성 JavaScript는 실행할 때까지 에러를 알 수 없습니다. typeof로 체크할 수 있지만, 모든 함수에 체크를 넣는 건 비현실적입니다.

// typeof 체크 — 매번 이렇게 해야 할까?
function add(a, b) {
  if (typeof a !== "number" || typeof b !== "number") {
    throw new Error("숫자만 가능!");
  }
  return a + b;
}

TypeScript = JavaScript + 타입 코드를 실행하기 전에 에러를 잡아줍니다

.ts 파일 작성: 타입이 포함된 TypeScript 코드

컴파일러 검사: tsc가 타입 에러를 찾아줌

.js 파일 생성: 타입 제거된 순수 JavaScript

브라우저 실행: 에러 없는 안전한 코드 실행

바이브 코더를 위한 핵심 AI가 TypeScript로 코드를 생성하면, 에디터가 자동으로 에러를 표시해줍니다. 타입이 곧 AI와 소통하는 설계도입니다.

TypeScript의 기본 타입 3가지 string, number, boolean

// 기본 타입 선언
let username: string = "김짓";
let age: number = 25;
let isStudent: boolean = true;

// 배열 타입
let skills: string[] = ["React", "Next.js"];
let scores: number[] = [90, 85, 92];

실전 팁: 대부분의 경우 타입 추론으로 충분합니다. 함수의 매개변수와 반환값에만 타입을 명시하면 됩니다.

TypeScript를 쓰려면 먼저 npm을 알아야 합니다

# 프로젝트 초기화 — package.json 생성
npm init -y

# 패키지 설치
npm install react react-dom    # 프로덕션 의존성
npm install -D typescript      # 개발 의존성 (-D)

# 스크립트 실행
npm run dev      # package.json의 scripts.dev 실행
npm run build    # 빌드

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build"
  },
  "dependencies": {
    "react": "^19.0.0",
    "next": "^15.0.0"
  },
  "devDependencies": {
    "typescript": "^5.0.0"
  }
}

바이브 코더 팁 npm install 후 에러가 나면 `rm -rf node_modules && npm install`로 다시 설치하세요. AI에게 에러 메시지를 그대로 붙여넣으면 해결책을 알려줍니다.

TypeScript는 JavaScript와 완전히 다른 별도의 언어다.

다음 중 TypeScript의 타입 추론 결과가 올바른 것은?

TypeScript의 타입 정보는 브라우저에서 실행될 때도 유지된다.

TypeScript를 사용하면 에러를 언제 발견할 수 있나요?

key

핵심 용어

🔄

let x = 10

타입: number — 값이 바뀔 수 있으니 넓은 타입

🔒

const x = 10

타입: 10 (리터럴) — 값이 고정이니 정확한 타입

📦

npm

Node Package Manager — JavaScript 패키지 설치·관리 도구

📋

package.json

프로젝트 설명서 — 이름, 버전, 의존성 목록

📁

node_modules

설치된 패키지 폴더 — Git에 올리지 않음

⚡

npx

설치 없이 패키지 실행 — create-next-app 등에 사용

edit_note

정리 노트

TypeScript 기초 — 타입이 왜 필요한가?

핵심 개념

동적 타입의 문제: JavaScript는 런타임에 타입이 결정되어 예측 불가능한 에러 발생
TypeScript: JavaScript + 정적 타입 = 컴파일 시점에 에러 감지
기본 타입: string, number, boolean — 가장 많이 쓰는 3가지
타입 추론: 값을 보고 TypeScript가 자동으로 타입을 결정하는 기능

★

AI가 생성한 코드도 타입이 있으면 에러를 미리 잡을 수 있습니다.

image

시각 자료

다이어그램: wd-scene-typescript

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작