Matt's Tidbits #94 - TypeScript에서 안전한 열거형 작성하기

Last time I wrote about how to get started with React Native. 이번 주에는 TypeScript에서 안전한 열거형을 작성하는 방법에 대한 간단한 정보를 얻었습니다!

많은 프로그래밍 언어가 열거형을 지원하지만 TypeScript에서는 약간 다르게 작동합니다.

열거형을 정의하고 사용하는 것은 정말 간단합니다. 다음과 같이 할 수 있습니다.

enum MyEnum {
  A,
  B,
  C,
}

function foo(enum: MyEnum) {}

foo(MyEnum.A);

정말 놀랐던 점은 이렇게 하는 것도 완벽하게 유효하다는 것입니다.

foo(42);

왜?!!? 솔직히 말해서, 이것은 나에게 전혀 의미가 없습니다. 열거형을 정의하고 열거형을 함수에 대한 매개변수로 지정하는 모든 문제를 겪었다면 이 열거형 대신 임의의 숫자를 지정하고 여전히 유효한 코드를 유지할 수 있는 이유는 무엇입니까?

<5분 명상 휴식/>

좋은 소식은 열거형을 이런 식으로 사용할 수 없도록 보장하는 방법이 있다는 것입니다!

다른 많은 프로그래밍 언어와 마찬가지로 열거형은 일반적으로 정수로 표시됩니다. 첫 번째 열거형 값은 0, 두 번째 열거형 값은 1 등입니다. 그러나 TypeScript는 문자열 기반 열거형과 이종 열거형의 두 가지 다른 열거형을 지원합니다.

불행히도 이질적인 열거형은 숫자형 열거형과 동일한 문제를 겪습니다. 그러나 문자열 기반 열거형은 그렇지 않습니다!

따라서 enum 정의를 다음과 같이 변경하면:

enum MyEnum {
  A = 'A',
  B = 'B',
  C = 'C',
}

이제 foo 함수를 호출하는 유일한 방법은 유효한 열거형 값 중 하나를 전달하는 것입니다. 임의의 숫자(또는 문자열)를 전달하면 다음 컴파일 오류가 생성됩니다.

Argument of type '42' is not assignable to parameter of type 'MyEnum'.

열거형에 대해 임의의 숫자 값을 지정할 수 있기를 원하는 경우가 있을 수 있지만 저는 문자열 기반 버전을 고수할 것입니다!

TypeScript의 열거형에 대한 자세한 내용은 공식 핸드북을 확인하십시오. https://www.typescriptlang.org/docs/handbook/enums.html

TypeScript 열거형이 이 동작으로 설계된 이유를 아는 사람이 있으면 의견에 알려주십시오!

여기 Accenture의 멋진 디지털 제품 팀에서 저와 함께 일하고 싶으십니까? We’re hiring!