TypeScript 타입 시스템 완벽 가이드



TypeScript의 타입 시스템을 이해하면 더 안전하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.



기본 타입


// 원시 타입
let name: string = "홍길동";
let age: number = 30;
let isActive: boolean = true;

// 배열
let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["Kim", "Lee"];

// 튜플
let tuple: [string, number] = ["Kim", 30];

// 열거형
enum Status { PENDING, APPROVED, REJECTED }
let status: Status = Status.APPROVED;

// any, unknown, never
let data: any = "anything";
let input: unknown = getUserInput();
function error(): never { throw new Error(); }


인터페이스와 타입


// 인터페이스
interface User {
    id: number;
    name: string;
    email?: string;  // 선택적 속성
    readonly createdAt: Date;  // 읽기 전용
}

// 타입 별칭
type ID = number | string;
type Point = { x: number; y: number };

// 확장
interface Admin extends User {
    role: string;
}

// 교차 타입
type AdminUser = User & { role: string };


제네릭


// 기본 제네릭
function identity<T>(arg: T): T {
    return arg;
}

// 제네릭 인터페이스
interface Response<T> {
    data: T;
    status: number;
}

// 제약 조건
function getProperty<T, K extends keyof T>(obj: T, key: K) {
    return obj[key];
}

// 기본값
interface Container<T = string> {
    value: T;
}


유틸리티 타입


interface User {
    id: number;
    name: string;
    email: string;
}

// Partial - 모든 속성 선택적
type PartialUser = Partial<User>;

// Required - 모든 속성 필수
type RequiredUser = Required<User>;

// Pick - 특정 속성만 선택
type UserName = Pick<User, "name" | "email">;

// Omit - 특정 속성 제외
type UserWithoutId = Omit<User, "id">;

// Record
type UserMap = Record<string, User>;

// ReturnType
type FuncReturn = ReturnType<typeof someFunction>;


조건부 타입


// 기본 조건부 타입
type IsString<T> = T extends string ? true : false;

// infer
type UnpackArray<T> = T extends (infer U)[] ? U : T;
type Str = UnpackArray<string[]>;  // string

// 분산 조건부 타입
type NonNullable<T> = T extends null | undefined ? never : T;


타입 가드


// typeof
function process(value: string | number) {
    if (typeof value === "string") {
        return value.toUpperCase();
    }
    return value * 2;
}

// instanceof
class Dog { bark() {} }
class Cat { meow() {} }

function speak(animal: Dog | Cat) {
    if (animal instanceof Dog) {
        animal.bark();
    } else {
        animal.meow();
    }
}

// 사용자 정의 타입 가드
function isUser(obj: any): obj is User {
    return "id" in obj && "name" in obj;
}


고급 패턴


// 템플릿 리터럴 타입
type EventName = `on${Capitalize<string>}`;

// 맵드 타입
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

// 재귀 타입
type DeepPartial<T> = {
    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};