통합 요약노트
Ch.15 TypeScript 기초 — AI가 이해하는 타입
타입 추론, interface, 제네릭 — AI 코드 정확도를 높이는 핵심
이 챕터의 내용
타입이 왜 필요한가?
TypeScript — JavaScript에 타입을 더해 컴파일 시점에 에러를 잡아주는 언어입니다.
JavaScript는 자유롭습니다 하지만 그 자유에는 대가가 있습니다
TypeScript = JavaScript + 타입 코드를 실행하기 전에 에러를 잡아줍니다
TypeScript의 기본 타입 3가지 string, number, boolean
interface와 type — 객체의 설계도
interface와 type — 객체의 설계도를 만들어 AI도, 에디터도, 동료도 같은 형태를 공유합니다.
interface = 객체의 설계도 어떤 필드가 있어야 하는지 미리 정합니다
type 키워드로도 타입을 정의합니다 union(|)과 intersection(&)이 핵심입니다
API 응답에 타입을 정의하면 AI가 더 정확한 코드를 생성합니다
제네릭과 유틸리티 타입
제네릭 — 타입을 변수처럼 사용해서, 하나의 함수로 모든 타입을 처리합니다.
제네릭 = 타입의 변수 <T>로 나중에 결정할 타입을 넣습니다
TypeScript가 기본 제공하는 유틸리티 타입으로 타입을 변환합니다
React 컴포넌트에서도 제네릭을 활용할 수 있습니다
핵심 용어 모음
let x = 10
타입: number — 값이 바뀔 수 있으니 넓은 타입
const x = 10
타입: 10 (리터럴) — 값이 고정이니 정확한 타입
npm
Node Package Manager — JavaScript 패키지 설치·관리 도구
package.json
프로젝트 설명서 — 이름, 버전, 의존성 목록
node_modules
설치된 패키지 폴더 — Git에 올리지 않음
npx
설치 없이 패키지 실행 — create-next-app 등에 사용
프롬프트에 타입 포함
AI에게 interface를 보여주면 정확한 코드 생성
에디터 자동완성
타입이 있으면 . 찍는 순간 필드 목록 표시
리팩토링 안전성
필드명 변경 시 모든 사용처에서 에러 표시
Partial<T>
모든 필드를 선택적(?)으로 만듦 — 수정 폼에 유용
Pick<T, K>
지정한 필드만 골라서 새 타입 생성
Omit<T, K>
지정한 필드를 제외한 새 타입 생성
비교 정리
| 항목 | interface | type |
|---|---|---|
| 객체 형태 | ✅ 가능 | ✅ 가능 |
| union / intersection | ❌ 불가 | ✅ | 와 & |
| 확장 (extends) | ✅ extends | ✅ & 교차 |
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기