TypeScript 배우기2

타입스크립트 시작하기, Inflearn

---

enum

• enum 객체에 항목만 있다면 첫번째 항목부터 암묵적으로 값으로 0이 할당 되어 있다.

enum DogKind {
  Maltese, // 0
  Retriever, // 1
  Shiba, // 2
}

위와같이 enum을 설정하고 변수에 할당하여 보자.

let dog1: DogKind = DogKind.Maltese;
let dog2: DogKind = DogKind.Retriever;
let dog3: DogKind = DogKind.Shiba;

console.log(dog1, dog2, dog3); // 0 1 2

• enum객체 항목에 숫자를 할당할 경우 양방향으로 맵핑하고 있다.
  그 이유는 enum값은 다음과 같이 컴파일 하게 된다고 한다.

enum DogKind {
  Maltese, //0
  Retriever, //1
  Shiba, //2
}

위 enum type을 컴파일한 js는 다음과 같다.

var DogKind;
(function (DogKind) {
    DogKind[DogKind["Maltese"] = 0] = "Maltese";
    DogKind[DogKind["Retriever"] = 1] = "Retriever";
    DogKind[DogKind["Shiba"] = 2] = "Shiba";
})(DogKind || (DogKind = {}));

enum 타입으로 선언한 것은 enum객체를 만들고 숫자나 타입명을 받으면 값을 출력할 수 있도록, 즉 순환참조 하도록 되었다는 것을 알 수 있었다.
그렇기 때문에 아래와 같이 표현할 수도 있다.

enum DogKind {
  Maltese,
  Retriever,
  Shiba,
}

console.log(DogKind[0]); // Maltese
console.log(DogKind[1]); // Retriever
console.log(DogKind[2]); // Shiba

string값을 할당하면 양방향 맵핑 없이 string만으로 할당한다.

enum DogKind1 {
  Maltese = "maltese",
  Retriever = "retriever",
  Shiba = "shiba",
}
let dog4: DogKind1 = DogKind1.Maltese;
let dog5: DogKind1 = DogKind1.Retriever;
let dog6: DogKind1 = DogKind1.Shiba;
console.log(dog4, dog5, dog6); // maltese retriever shiba

위 ts파일을 컴파일한 js파일은 다음과 같다.

var DogKind1;
(function (DogKind1) {
    DogKind1["Maltese"] = "maltese";
    DogKind1["Retriever"] = "retriever";
    DogKind1["Shiba"] = "shiba";
})(DogKind1 || (DogKind1 = {}));
let dog4 = DogKind1.Maltese;
let dog5 = DogKind1.Retriever;
let dog6 = DogKind1.Shiba;
console.log(dog4, dog5, dog6);

숫자가 할당된 경우와 다른것을 비교해보자.

• 어떤 항목에 숫자(값)을 할당하였다면, 다음 항목은 +1이다.
  위 예제 enum type에서 임의의 숫자를 할당하여 보자.

enum DogKind {
  Maltese,
  Retriever = 5,
  Shiba,
}

let dog1: DogKind = DogKind.Maltese;
let dog2: DogKind = DogKind.Retriever;
let dog3: DogKind = DogKind.Shiba;
console.log(dog1, dog2, dog3); //0 5 6

숫자를 지정하지 않은 항목에는 "0"부터 할당되었고, 숫자를 지정한 항목 이후에는 +1이 되었다.

• enum객체는 컴파일 후에도 전역객체에 남아있다. 그렇기때문에 실행시 무거워질수도 있다.
  그렇기 때문에 const enum이나 union type을 하는 것을 추천한다.

const enum DogKind {
  Maltese,
  Retriever,
  Shiba,
}

let dog1: DogKind = DogKind.Maltese;
let dog2: DogKind = DogKind.Retriever;
let dog3: DogKind = DogKind.Shiba;
console.log(dog1, dog2, dog3); // 0 1 2

위와 같이 enum을 설정하면 다음과 같이 JavaScript로 컴파일 된다.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });

let dog1 = 0 /* DogKind.Maltese */;
let dog2 = 1 /* DogKind.Retriever */;
let dog3 = 2 /* DogKind.Shiba */;
console.log(dog1, dog2, dog3);

interface - Index Signatures

지난시간부터 배웠던 interface이다. interface로 다양한 타입이 정의 가능한데 그중 index Signatures라고 하는 기능을 정리하려고 한다.(정확한 명칭이 아닐 수도 있다. 강의에서는 index type이라 불렀다.) interface뿐만 아니라 class에도 적용가능하다 하니 참고 바란다. 예시를 보자.

interface Dog {
  name: string;
  age: number;
}

const dog: Dog = {
  name: "ddoddo",
  age: 1,
  birth: "2021-07-27", //에러가 발생한다.
};

indexs signatures, 추가 키워드에 관한 타입을 추가하여, 추가될 키워드에 대한 타입을 제공한다.

interface Dog {
  name: string;
  age: number;
  [prop: string]: string | number;
}

const dog: Dog = {
  name: "ddoddo",
  age: 1,
  birth: "2021-07-27" //에러가 발생하지 않는다.
};

dog["kind"] = "Shiba"; // 키워드 - 값을 추가 하여도 에러가 발생하지 않는다.
dog["Iskorean"] = false; 
//에러가 발생한다. value type인 string | number를 벗어났기 때문이다.

"[]" 안에 있는 것과 같이 사용하면, 다음 property name에 대한 type을 지정해주는 것이다.

참고

[TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다., LINE Engineering, 2022년07월27일 접속]
https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking/

[enum 타입, TypeScript 가이드북, 2022년07월27일 접속]
https://yamoo9.gitbook.io/typescript/types/enum

[TypeScript - Interfaces, TutorialsTeacher, 2022년07월27일 접속]
https://www.tutorialsteacher.com/typescript/typescript-interface

[Index Signatures, Typescript Docs, 2022년07월27일 접속]
https://www.typescriptlang.org/docs/handbook/2/classes.html#index-signatures