[TypeScript] 타입 별칭(Type Alias)과 인덱스 시그니처(Index Signature)

매번 복잡한 객체 타입을 정의할 때마다 긴 코드를 반복해서 작성하는 것은 비효율적이다. 이번에는 타입을 변수처럼 정의해 재사용성을 높여주는 타입 별칭과, 객체의 프로퍼티를 유연하게 관리하게 해주는 인덱스 시그니처에 대해 알아본다.

1. 타입 별칭 (Type Alias)

타입 별칭을 이용하면 변수를 선언하듯 타입을 별도로 정의하고 이름을 붙여줄 수 있다.

1-1. 기본 정의 및 사용

type 키워드를 사용하여 정의한다.

// 타입 별칭 정의
type User = {
  id: number;
  name: string;
  nickname: string;
  birth: string;
  bio: string;
  location: string;
};

이렇게 만든 User 타입은 변수의 타입을 정의할 때 간편하게 사용할 수 있다.

let user: User = {
  id: 1,
  name: "탬니",
  nickname: "taemni",
  birth: "2xxx.xx.xx",
  bio: "반갑습니다~",
  location: "xx시",
};

let user2: User = {
  id: 2,
  name: "홍길동",
  nickname: "길동이",
  birth: "1xxx.xx.xx",
  bio: "안녕하세요",
  location: "xx시",
};

매번 객체 리터럴로 타입을 길게 명시하지 않아도 되므로 코드의 가독성이 좋아지고 중복이 줄어든다.

1-2. 스코프 (Scope) 규칙

타입 별칭도 변수처럼 스코프의 규칙을 따른다.

동일한 스코프 내 중복 선언 불가: 같은 이름(User)으로 두 번 정의하면 에러가 발생한다.
다른 스코프 내 중복 선언 가능: 함수 내부 등 다른 스코프라면 같은 이름을 사용할 수 있다.

type User = {
  id: number;
  name: string;
  // ...
};

// type User = {}; // ❌ 에러 발생 (같은 스코프)

function test() {
  type User = string; // ✅ 가능 (함수 내부 스코프)
}

위 코드에서 test 함수 내부의 User는 string 타입이고, 함수 외부의 User는 객체 타입이 된다.

1-3. 컴파일 시점 제거

타입 별칭은 타입스크립트의 문법이므로 컴파일되어 자바스크립트로 변환되면 흔적도 없이 사라진다. 런타임 코드에 영향을 주지 않는다.

2. 인덱스 시그니처 (Index Signature)

인덱스 시그니처는 객체의 키(Key)와 값(Value)의 규칙만 정의하여 타입을 유연하게 만드는 문법이다.

2-1. 사용하는 이유

예를 들어 국가 코드를 저장하는 객체가 있다고 가정해보자. 국가가 3개라면 일일이 정의할 수 있지만, 만약 100개가 넘는다면?

// 100개를 다 적으려면 너무 힘들다...
type CountryCodes = {
  Korea: string;
  UnitedState: string;
  UnitedKingdom: string;
  // ... (나머지 97개)
};

이럴 때 인덱스 시그니처를 사용하면 간단하게 정의할 수 있다.

2-2. 문법 및 사용

[key: 타입]: 타입 형태로 작성한다.

type CountryCodes = {
  [key: string]: string;
};

let countryCodes: CountryCodes = {
  Korea: "ko",
  UnitedState: "us",
  UnitedKingdom: "uk",
  Brazil: "bz", // 자유롭게 추가 가능
};

위 코드는 "key가 string 타입이고, value도 string 타입인 모든 프로퍼티를 허용한다" 는 의미이다. 따라서 Korea, Brazil 등 어떤 문자열 키가 들어와도 값이 문자열이라면 모두 허용된다.

2-3. 특정 프로퍼티와 혼용 및 주의사항

인덱스 시그니처를 사용하면서 동시에 필수 프로퍼티를 명시할 수도 있다.

type CountryNumberCodes = {
  [key: string]: number;
  Korea: number; // Korea는 반드시 있어야 함
};

⚠️ 주의할 점: 인덱스 시그니처와 개별 프로퍼티를 섞어 쓸 때, 개별 프로퍼티의 타입은 반드시 인덱스 시그니처 타입과 일치하거나 호환되어야 한다.

type CountryNumberCodes = {
  [key: string]: number; // 모든 값은 number여야 함
  // Korea: string; // ❌ 에러 발생! (string은 number에 할당 불가)
};

인덱스 시그니처가 number를 반환한다고 선언했으므로, Korea 속성 또한 number여야 규칙이 깨지지 않는다.

요약

타입 별칭: type 키워드로 타입을 변수처럼 정의해 재사용한다. 컴파일 시 사라진다.
인덱스 시그니처: [key: T]: U 문법으로 객체의 속성을 유연하게 정의한다.
주의: 인덱스 시그니처와 함께 쓰는 구체적인 속성은 인덱스 시그니처의 타입과 호환되어야 한다.

Taemni's Blog