[Typescript] 타입스크립트의 꽃 🌸 Type Alias

타입스크립트의 Type Alias(타입 별칭) 는 코드의 가독성과 유지보수성을 높여주는 핵심 기능이다. 이 기능을 제대로 활용하면 타입스크립트 개발의 효율성이 200% 상승한다.

Type Alias 기본 개념

타입에 이름을 붙이는 기술

type UserID = string | number;
type Coordinate = [number, number];

• 복잡한 타입을 단순한 이름으로 재사용
• type 키워드 사용

기본 사용 패턴

// Before
const logIn = (id: string | number) => { /* ... */ };

// After
type UserID = string | number;
const logIn = (id: UserID) => { /* ... */ };

• 반복되는 타입 정의를 한 곳에서 관리
• 의도가 명확히 드러나는 코드 작성 가능

Type Alias의 진정한 위력 💥

(1). 객체 타입 정의

type User = {
  id: string;
  name: string;
  age: number;
  isAdmin?: boolean;
};

const currentUser: User = {
  id: "user_01",
  name: "Alice",
  age: 30
};

(2). 유니언 타입 결합

type Status = "loading" | "success" | "error";
type ApiResponse<T> = {
  status: Status;
  data?: T;
  error?: string;
};

const response: ApiResponse<User> = {
  status: "success",
  data: currentUser
};

(3). 함수 타입 정의

type ClickHandler = (event: MouseEvent) => void;
type Calculator = (a: number, b: number) => number;

const add: Calculator = (x, y) => x + y;

(4). 제네릭과의 조합

type Paginated<T> = {
  data: T[];
  currentPage: number;
  totalPages: number;
};

type UserPagination = Paginated<User>;

고급 활용 테크닉 🔥

(1). 타입 확장(Intersection)

type Person = {
  name: string;
  age: number;
};

type Employee = Person & {
  company: string;
  position: string;
};

const newEmployee: Employee = {
  name: "Bob",
  age: 35,
  company: "Tech Corp",
  position: "Developer"
};

(2). 유틸리티 타입 활용

type PartialUser = Partial<User>; // 모든 속성이 옵셔널
type ReadonlyUser = Readonly<User>; // 모든 속성이 읽기 전용
type UserPreview = Pick<User, "id" | "name">; // 특정 속성만 선택

(3). 재귀적 타입 정의

type TreeNode = {
  value: string;
  children?: TreeNode[];
};

const tree: TreeNode = {
  value: "root",
  children: [
    { value: "child1" },
    { value: "child2", children: [{ value: "grandchild" }] }
  ]
};

Type Alias vs Interface

주요 차이점 비교표

• Type Alias 선택 시기:
  • 유니언/인터섹션 타입이 필요할 때
  • 튜플이나 함수 타입을 정의할 때
  • 제네릭과 복잡한 타입 조합이 필요할 때
• Interface 선택 시기:
  • 객체 지향 프로그래밍(OOP) 구조 정의
  • 선언 병합이 필요한 경우
  • 라이브러리 타입 정의 공개 시

실전 예제

(1). 의미 있는 이름 사용

// Bad
type Data = string;

// Good
type SerializedData = string;

(2). PascalCase 컨벤션 적용

type UserProfile = {};  // Good
type user_profile = {}; // Bad

(3). 과도한 추상화 금지

// 지나치게 복잡한 예시
type DeepNestedType<T> = {
  data: T extends infer U ? U[] : never;
  meta?: { [K in keyof T]?: boolean };
};

(4). 문서화 주석 추가

/**
 * 시스템 사용자 정보 타입
 * @property id - 사용자 고유 식별자
 * @property name - 실명 (2~20자)
 */
type User = {
  id: string;
  name: string;
};

📚 요약 표: Type Alias 핵심 정리