[ TypeScript ] 타입 설계: 타입 별칭, 인덱스 시그니처, 열거형 타입으로 코드 최적화하기

💡 타입 별칭 (Type Alias)

// 타입 별칭(타입 코드 중복 방지)
type User = {
  id: number;
  name: string;
  nickname: string;
  birth: string;
  bio: string;
  location: string;
};

타입스크립트에서 타입 별칭을 사용하면 타입을 이와 같이 별도로 정의할 수 있고 type 타입명 = {타입 나열} 형태로 정의합니다. 위에서는 User이라는 타입명으로 여러개의 프로퍼티가 존재하는 객체 타입을 정의하였습니다.

 

 

type User = {
  id: number;
  name: string;
  nickname: string;
  birth: string;
  bio: string;
  location: string;
};

let user1: User = {
  id: 1,
  name: "수현",
  nickname: "shyunu",
  birth: "1998.09.30",
  bio: "김수현입니다!",
  location: "동대문구",
};

let user2: User = {
  id: 2,
  name: "해린",
  nickname: "haerin",
  birth: "2006.05.15",
  bio: "강해린입니다!",
  location: "동작구",
};

위에서 만든 User 타입 별칭은 다음과 같이 변수의 타입을 정의할 때 타입 주석과 함께 사용할 수 있습니다.

 

 

type User = {
  id: number;
  name: string;
  nickname: string;
  birth: string;
  bio: string;
  location: string;
};

type User = {} // ❌

마지막 코드에서 보시다시피 동일한 스코프에 동일한 User라는 이름의 타입 별칭을 선언하는 것은 불가능합니다.

 

 

type User = {
  id: number;
  name: string;
  nickname: string;
  birth: string;
  bio: string;
  location: string;
};

function example() {
  type User = string; // 다른 스코프
}

하지만, 이렇게 다른 스코프에는 중복된 이름으로 별칭을 선언해도 무방합니다. example 함수 내부에서는 User은 string 타입이 되고, example 함수 바깥에서는 User는 객체 타입이 됩니다.

 

 

// tsc로 컴파일한 결과 javascript
let user1 = {
    id: 1,
    name: "수현",
    nickname: "shyunu",
    birth: "1998.09.30",
    bio: "김수현입니다!",
    location: "동대문구",
};
let user2 = {
    id: 2,
    name: "해린",
    nickname: "haerin",
    birth: "2006.05.15",
    bio: "강해린입니다!",
    location: "동작구",
};

export {};

타입 관련된 문법은 컴파일과 함께 사라진 형태로 이와 같이 javascript에 나타납니다. 타입 별칭 또한 타입 관련 문법이기 때문에 컴파일 결과 사라지게 됩니다.

 

 

 

---

💡 인덱스 시그니처 (Index Signature)

인덱스 시그니처는 객체 타입을 유연하게 정의할 수 있도록 돕는 특수한 문법으로, 타입을 위반하지만 않으면 값이 없어도 괜찮습니다.

 

 

type CountryCodes = {
  Korea: string;
  UnitedState: string;
  UnitedKingdom: string;
};

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

다음은 다양한 국가들의 영어 코드를 저장하는 객체입니다. 만약 여기서 countryCodes에 100개 이상의 프로퍼티(국가 코드)가 추가되어야 한다면 타입도 각각 프로퍼티를 정의해주어야하기 때문에 굉장히 번거로워질 것 입니다.

 

 

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

let countryCodes: CountryCodes = {
  Korea: "ko",
  UnitedState: "us",
  UnitedKingdom: "uk",
  // .... 국가 추가
};

이 때 유용하게 사용되는 것이 바로 인덱스 시그니처입니다. [key: string]: string 는 인덱스 시그니처 문법으로, 이 객체 타입에는 key가 string 타입이고 value가 string 타입인 모든 프로퍼티를 포함한다는 의미입니다. 따라서 key와 value 모두 string 타입인 프로퍼티들이 자동으로 모두 포함됩니다.

 

 

type CountryNumberCodes = {
  [key: string]: number;
};

만약, 국가 코드를 숫자 형태로 보관하는 객체가 필요하다면 이와 같이 정의하면 됩니다.

 

type CountryNumberCodes = {
  [key: string]: number;
  Korea: number; // ⭕️
  Korea: string; // ❌
};

이 때 반드시 포함해야 하는 프로퍼티(Korea)가 있다면 다음과 같이 따로 직접 명시해주어도 됩니다. 하지만 인덱스 시그니처를 사용하면서 동시에 추가적인 프로퍼티를 정의한 경우에는 주의할 점이 있습니다. 인덱스 시그니처의 value 타입과 따로 직접 추가한 프로퍼티의 value 타입이 반드시 일치하거나 호환되어야합니다. 마지막 코드처럼 서로 호환되지 않는 타입으로 설정하면 오류가 발생합니다.

 

 

 

---

💡 열거형 타입 (Enum)

열거형 타입은 자바스크립트에는 존재하지 않는 타입스크립트에서만 사용할 수 있는 특별한 타입으로, 여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입입니다. 

 

 

⓵번 방법
enum Role {
  ADMIN,
  USER,
  GUEST,
}

⓶번 방법
enum Role {
  ADMIN = 0,
  USER = 1,
  GUEST = 2,
}

다음과 같이 3개의 멤버 ADMIN, USER, GUEST를 나열한 열거형 타입을 작성하였습니다. 이와 같이 enum의 멤버에 숫자를 할당할 수도 있지만 따로 지정을 하지 않으면 기본적으로 0부터 자동 할당됩니다. 따라서 두가지 방법은 같은 표현입니다.

 

enum Role {
  ADMIN = 10, // 10 할당 
  USER,       // 11 할당(자동)
  GUEST,      // 12 할당(자동)
}

enum Role {
  ADMIN,      // 0 할당(자동)
  USER = 10,  // 10 할당
  GUEST,      // 11 할당(자동)
}

만약, 다음과 같이 첫번째 값을 10으로 지정하면 자동으로 1씩 증가된 값으로 할당됩니다. 하지만 첫번째 값은 지정하지 않고 중간부터 값을 10으로 지정하게 되면, 첫번째 값은 기본값인 0이 할당되고 지정된 값 다음부터는 지정된 값으로부터 1씩 증가된 값이 할당됩니다. 그리고 이렇게 멤버의 값이 모두 숫자인 enum을 숫자형 enum 또는 숫자 열거형 타입이라고 부릅니다.

 

 

enum Role {
  ADMIN = 0,
  USER = 1,
  GUEST = 2,
}

const user1 = {
  name: "수현",
  role: Role.ADMIN, // 0은 관리자
};

const user2 = {
  name: "팜하니",
  role: Role.USER, // 1은 일반유저
};

const user3 = {
  name: "강해린",
  role: Role.GUEST, // 2는 게스트
};

이렇게 유저의 권한과 같은 여러 개의 멤버를 갖는 값을 숫자로 표기할 때 enum을 사용하면 보다 안전하고 직관적으로 관리할 수 있습니다.

 

 

enum Language {
  Korean = "ko",
  English = "en",
}

const user1 = {
  name: "수현",
  role: Role.ADMIN, // 0은 관리자
  language: Language.Korean,
};

다음과 같이 국가별 언어를 열거하는 enum에는 각 멤버에 문자열 값을 할당하면 되고, 모든 멤버의 값이 문자열 값인 enum을 문자열 enum이라고 부릅니다. 이렇게 문자열 enum을 사용하면 user1.language 같은 프로퍼티에 잘못 작성하는 실수를 방지할 수 있습니다.

 

 

// 컴파일된 자바스크립트 결과
var Role;
(function (Role) {
    Role[Role["ADMIN"] = 0] = "ADMIN";
    Role[Role["USER"] = 1] = "USER";
    Role[Role["GUEST"] = 2] = "GUEST";
})(Role || (Role = {}));
var Language;
(function (Language) {
    Language["Korean"] = "ko";
    Language["English"] = "en";
})(Language || (Language = {}));

또한, tsc를 이용하여 타입스크립트 코드를 컴파일하고 결과를 보면 enum은 컴파일 결과 사라지지 않고 자바스크립트의 객체가 됩니다.

 

 

 

출처) 한 입 크기로 잘라먹는 타입스크립트(TypeScript)_이정환