Ch 01. 기본 타입과 타입 추론
TypeScript에서 가장 자주 쓰는 타입 6개와 타입 추론 규칙을 한 챕터에 정리합니다.
원시 타입 3종
// 파일: src/primitives.tslet name: string = "Alice";let age: number = 30;let active: boolean = true;// 배열도 같은 방식let scores: number[] = [90, 85, 78];let tags: string[] = ["ts", "node"];
string, number, boolean — 이 세 가지가 코드의 90%를 차지합니다.
타입 추론
타입을 직접 쓰지 않아도 TypeScript는 초깃값으로 타입을 결정합니다.
// 파일: src/inference.tslet title = "TypeScript Guide"; // string으로 추론let count = 0; // number로 추론let enabled = false; // boolean으로 추론// 이후 다른 타입 대입은 에러count = "five"; // Error: Type 'string' is not assignable to type 'number'
초기화 없이 선언하면 any가 됩니다. 가능하면 선언과 동시에 초기화하세요.
let value; // any — 타입 정보 없음let value2: string; // string — 명시적 선언
any vs unknown
// 파일: src/any-unknown.ts// any: 타입 검사 완전 비활성화let raw: any = fetchData();raw.toFixed(); // 에러 없음 — 런타임에서 터질 수 있음// unknown: 안전한 any 대안let data: unknown = fetchData();data.toFixed(); // Error: Object is of type 'unknown'// 사용하려면 타입을 먼저 좁혀야 함if (typeof data === "number") { data.toFixed(); // OK}
규칙: any는 최후의 수단입니다. 타입을 모를 때는 unknown을 쓰고 좁혀서 사용하세요.
null과 undefined
TypeScript는 기본적으로 null과 undefined를 모든 타입에 허용하지 않습니다(strictNullChecks: true).
// 파일: src/null-undefined.ts// 명시적으로 허용할 때만 할당 가능let username: string | null = null;let middleName: string | undefined = undefined;// 함수 반환에서 자주 쓰는 패턴function findUser(id: number): User | null { return db.find(id) ?? null;}
void와 never
// 파일: src/void-never.ts// void: 반환값 없는 함수function log(message: string): void { console.log(message);}// never: 절대 반환되지 않는 함수 (예외 던지기, 무한루프)function fail(message: string): never { throw new Error(message);}function infiniteLoop(): never { while (true) {}}
never는 모든 타입의 하위 타입입니다. 타입 좁히기 마지막 분기에서 자주 등장합니다.
타입 추론 심화 — 컨텍스트 타이핑
// 파일: src/contextual.tsconst numbers = [1, 2, 3];// map 콜백의 n은 number로 자동 추론const doubled = numbers.map(n => n * 2);// 이벤트 핸들러도 컨텍스트에서 타입 결정document.addEventListener("click", (e) => { // e는 MouseEvent로 자동 추론 console.log(e.clientX, e.clientY);});
배열 메서드 콜백, 이벤트 핸들러처럼 TypeScript가 맥락을 아는 경우에는 타입을 생략해도 됩니다.
타입 단언 (Type Assertion)
컴파일러보다 개발자가 타입을 더 잘 아는 경우에만 사용합니다.
// 파일: src/assertion.tsconst input = document.getElementById("username") as HTMLInputElement;input.value = "Alice"; // HTMLElement에는 value가 없음 → 단언 필요// 이중 단언은 거의 항상 잘못된 설계const x = value as unknown as string; // 피하세요
정리
| 타입 | 용도 |
|---|---|
string, number, boolean |
원시 값 |
null, undefined |
빈 값 명시 |
any |
타입 검사 포기 (최후 수단) |
unknown |
안전한 동적 값 수신 |
void |
반환값 없는 함수 |
never |
절대 반환 안 되는 함수 |