[TypeScript] 타입 별칭(Type Aliases) 이해하기

기본 타입 별칭 생성하기

가장 기본적인 형태로, 숫자, 문자열, 불린과 같은 타입을 유니온 타입으로 결합한 별칭을 만들 수 있습니다.

type Value = string | number;
let input: Value;

input = "안녕하세요";
console.log(`입력: ${input}`); // 출력: 입력: 안녕하세요

input = 42;
console.log(`입력: ${input}`); // 출력: 입력: 42

객체 타입에 별칭 붙이기

type Point = {
  x: number;
  y: number;
};

const origin: Point = { x: 0, y: 0 };
console.log(`좌표: (${origin.x}, ${origin.y})`); // 출력: 좌표: (0, 0)

함수 매개변수에 타입 별칭 활용하기

타입 별칭은 함수의 매개변수 타입으로 사용하여, 보다 직관적으로 함수가 받을 수 있는 인자의 종류를 명시할 수 있습니다.

type UserId = string | number;

function greetUser(id: UserId): string {
  return `안녕하세요, 사용자 ${id}님!`;
}

console.log(greetUser("u123")); // 출력: 안녕하세요, 사용자 u123님!
console.log(greetUser(456));    // 출력: 안녕하세요, 사용자 456님!

문자열 리터럴 타입 별칭 사용하기

타입 별칭은 단순히 타입들을 결합하는 것뿐만 아니라, 특정 문자열 집합만 허용하도록 제한할 수도 있습니다. 이를 통해 코드 내에서 상수 값의 의미를 명확하게 할 수 있습니다.

type Color = "red" | "blue" | "green";

let selectedColor: Color = "blue";
console.log(`선택된 색상: ${selectedColor}`); // 출력: 선택된 색상: blue

// selectedColor = "yellow"; // 오류: "yellow"는 Color에 없음

복잡한 타입 간소화

튜플이나 중첩 객체 같은 복잡한 타입도 간소화할 수 있습니다.

type Employee = {
  id: number;
  details: [string, boolean]; // 이름, 활성 여부
};

const worker: Employee = {
  id: 101,
  details: ["지영", true],
};

console.log(`${worker.details[0]} (ID: ${worker.id}) - 활성: ${worker.details[1]}`);
// 출력: 지영 (ID: 101) - 활성: true

타입 vs 인터페이스

• 타입: 유니온, 튜플, 리터럴 등 다양한 타입에 유연하게 적용 가능, 확장 불가
• 인터페이스: 객체 중심, extends로 확장 가능