enum(열거형)?

타입스크립트에서 숫자 또는 문자열 값의 집합에 의미있는 이름을 부여하는 방법이다. 개발자의 의도를 문서화하거나 관련된 값을 한 곳에 모아두고 사용할 때 유용하다.

기본적으로 enum은 숫자형으로 정의된다. 아무것도 지정하지 않은 경우에는 첫번째 요소가 0부터 시작하며 자동으로 증가한다. 또, 초기값으로 숫자를 지정하면 그 다음 값들은 자동으로 증가한다.

enum Direction {
  Up,    // 0
  Down,  // 1
  Left,  // 2
  Right  // 3
}

console.log(Direction.Up);   // 0
console.log(Direction.Down); // 1

enum Direction {
  Up = 1,    
  Down,  // 2
  Left,  // 3
  Right  // 4
}

모든 요소를 문자열로 설정하려면 명확한 값을 지정해야 한다.

enum Status {
  Success = "SUCCESS",
  Failure = "FAILURE",
  Pending = "PENDING"
}

console.log(Status.Success); // "SUCCESS"

🔥 enum을 사용하는 이유

1. 가독성과 유지보수성 향상

코드에서 의미있는 이름을 사용하여 가독성을 높일 수 있다.

2. 자동완성 및 타입 안정성 제공

자동완성 기능이 제공되고, 타입 오류를 방지할 수 있다.

enum Status {
  Success = "SUCCESS",
  Failure = "FAILURE",
  Pending = "PENDING"
}

function setStatus(status: Status) {
  console.log(`Status set to ${status}`);
}

setStatus(Status.Success); 
setStatus("Loading"); // ❌

3. 런타임에서도 값이 유지됨

타입스크립트의 type이나 interface 는 컴파일 시 사라지지만 enum 은 런타임에도 남아있기에 값 자체를 직접 활용 할 수 있다.

⚠️  enum은 런타임에서도 존재한다!?

Enum은 타입스크립트가 자체적으로 구현한 코드이다. 그렇기 때문에 타입스크립트로 작성된 코드를 트랜스파일하여 자바스크립트로 변환된 코드는 아래와 같다.

var Status;
(function (Status) {
	Status[Status["SUCCESS"] = "SUCCESS";
	Status[Status["FAILURE"] = "FAILURE";
	Status[Status["PENDING"] = "PENDING";
})(Status || (Status = {}));

console.log(Status.Success); // "SUCCESS"