타입 별칭과 인덱스 시그니처

Raccoon·2025년 4월 28일

타입스크립트에서 타입을 더 효율적이고 유연하게 다룰 수 있도록 도와주는타입 별칭(type alias)인덱스 시그니처(index signature) 에 대해 정리해보려고 한다.

타입 별칭

타입을 마치 변수처럼 선언해서 사용할 수 있도록 해준다.

만약 아래와 같은 코드가 있다고 해보자.

let user1: {
  id: number,
  name: string,
  nickname: string,
  age : number,
} = {
  id: 1,
  name: "leedo",
  nickname: "lee",
  age : 26,
};

let user2 ...
let user3 ...

타입이 중복될 뿐만 아니라, 속성이 추가되면 일일이 추가해야할 것이다.
이러한 번거로움을 타입 별칭 으로 해결할 수 있다.

type User = {
	id: number;
    name: string;
    nickname: string;
    age: number;
 }

let user1 : User = {
  id: number,
  name: string,
  nickname: string,
  age : number,
}

let user2 : User = ...
let user3 : User = ...

가독성이 좋아졌을 뿐만 아니라, 중복되는 코드도 압도적으로 줄어들 것이다.
또, User 타입을 따로 빼서 모듈화 하는 것도 가능하겠다.

주의해야할 점은, 타입 별칭은 변수처럼 작동하기 때문에, 같은 스코프 내에서 중복되면 안된다는 점이다.

인덱스 시그니처

인덱스 시그니처(index signature) 는 객체의 키와 값의 타입을 동적으로 정의할 수 있게 해준다.

다음 코드를 살펴보자.

type CountryCodes = {
  Korea : string,
  UnitedStates : string,
  UnitedKingdom : string,
}

let countryCodes : CountryCodes = {
  Korea : "ko",
  UnitedStates : "us",
  UnitedKingdom : "uk",
}

지금은 국가 코드를 세 개만 적어놨지만, 만약 그 수가 늘어나면, 늘어나는 만큼 타입에 추가해줘야 할 것이다.
이러한 번거로움을 인덱스 시그니처로 해결할 수 있다.

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

let countryCodes : CountryCodes = {
  Korea : "ko",
  UnitedStates : "us",
  UnitedKingdom : "uk",
}

위와 같이 사용하면 keystring 타입으로, valuestring 타입으로 정의해서 사용할 수 있다.
이렇듯 인덱스 시그니처 는 키와 값의 패턴이 일정할 때 사용하면 편리하다.

하지만, 인덱스 시그니처는 규칙을 위반하지만 않으면 상관이 없기 때문에, 다음과 같은 상황을 주의해야 한다.

	let contryCodes : CountryCodes = {}; // OK

규칙을 위반할 프로퍼티가 없기 때문에, 타입스크립트에서 에러로 간주하지 않는다.

만약, 반드시 존재해야 할 프로퍼티가 있다면, 아래와 같이 따로 지정해줄 수 있다.

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


let contryCodes : CountryCodes = {}; // error !!

-------------------
  
let contryCodes : CountryCodes = { // OK
  Korea: 'ko',
};

추가 프로퍼티로 지정해준 프로퍼티가 없다면, 에러를 발생시킨다.

하지만, 아래와 같이 추가 프로퍼티와 기존에 명시된 타입이 일치하지 않는다면, 에러를 발생시키니 주의해야 한다.

type CountryCodes = {
  [key: string]: string;
  Korea: number; // error !!
};
profile
꾸준함을 목표로 합니다.

0개의 댓글