[TS] 타입 별칭과 인덱스 시그니처, Enum 타입

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

1️⃣ 타입 별칭

반복에 사용하기 좋다.

tsc로 컴파일 해보면 js파일에서 타입은 모두 사라진다.

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

// 중복 이름 안됨 - 오류 발생
type User = {}

// 함수 안과 밖은 별개의 타입이므로 중복 이름 가능
function func() {
  type User = {};
}

let user1: User = {
  id: 1,
  name: "안수이",
  nickname: "수1",
  birth: "2001.02.18",
  bio: "안녕",
  location: "서울시",
};

let user2: User = {
  id: 2,
  name: "안수이",
  nickname: "수2",
  birth: "2001.02.18",
  bio: "안녕하세요",
  location: "서울시",
};

 

2️⃣ 인덱스 시그니처

객체가 여러 Key를 가질 수 있으며 Key와 매칭되는 value를 가지는 경우 사용한다.

// 인덱스 시그니처

// key, value가 모두 string일 때 
// 인덱스 시그니처 사용 x
type CountryCodes = {
  Korea: string;
  UnitedStates: string;
  UnitedKingdom: string;
};

// 인덱스 시그니처 사용 o
type CountryCodesIS = {
  [key: string]: string;
};

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

 

객체 내에서 모든 속성을 다 지워도 오류가 발생하지 않는다. 

따라서 반드시 필요한 부분은 따로 추가해준다.

type CountryNumbers = {
  [key: string]: number;
  Korea: number; // 반드시 필요함
  Korea: string // string이 number와 일치하지 않으므로 오류 발생
};

let countryNumbers: CountryNumbers = {
  Korea: 410,
  UnitedStates: 840,
  UnitedKingdom: 826,
};

---

Enum 타입

여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입

// enum 타입

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

// 문자
enum Language {
  korean = "ko",
  english = "en",
}

const user1 = {
  name: "안수이",
  // role: 0 <- 관리자
  role: Role.ADMIN,
  language: Language.korean,
};

const user2 = {
  name: "김수이",
  // role: 1 <- 일반 유저
  role: Role.USER,
  language: Language.english,
};

const user3 = {
  name: "최수이",
  //role: 2 <- 게스트
  role: Role.USER,
  language: Language.korean,
};

console.log(user1, user2, user3);

 

출력 결과

 

❗컴파일 결과 enum 타입은 사라지지 않는다.

// enum 타입

// 숫자
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 = {}));

const user1 = {
    name: "안수이",
    // role: 0 <- 관리자
    role: Role.ADMIN,
    language: Language.korean,
};

const user2 = {
    name: "김수이",
    // role: 1 <- 일반 유저
    role: Role.USER,
    language: Language.english,
};

const user3 = {
    name: "최수이",
    //role: 2 <- 게스트
    role: Role.USER,
    language: Language.korean,
};

console.log(user1, user2, user3);
export {};

 

---

이정환님의 인프런 강의 "한 입 크기로 잘라 먹는 타입스크립트(TypeScript)"를 참고하여 작성하였습니다.