iBetter Books
수정

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는 기본적으로 nullundefined를 모든 타입에 허용하지 않습니다(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 절대 반환 안 되는 함수