지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > TypeScript에서 Enum(열거)의 사용법에 대해 이야기해 보겠습니다.

TypeScript에서 Enum(열거)의 사용법에 대해 이야기해 보겠습니다.

青灯夜游
풀어 주다： 2021-07-05 10:19:21
앞으로
3393명이 탐색했습니다.

이 글에서는 TypeScript의 Enum(열거) 구문을 소개하고, Enum의 기본 사용법과 기본 JavaScript를 사용하여 Enum을 구현하는 방법에 대해 설명합니다.

TypeScript에서 Enum(열거)의 사용법에 대해 이야기해 보겠습니다.

Enum

Enum은 enumeration이라고도 하는 TypeScript의 새로운 구문으로, 일반적으로 상태 판단에 사용되는 동일한 계열의 여러 상수(수정할 수 없는 변수)를 관리하는 데 사용됩니다.

웹에서 일반적인 상태 판단은 요청을 처리할 때 그에 따라 다양한 응답 상태 코드를 처리하는 것입니다. 

const handleResponseStatus = (status: number): void => {
  switch (status) {
    case 200: // 请求成功时
      // Do something...
      break;
    case 400: // 请求失败时
      // Do something...
      break;
    default:
      throw (new Error('No have status code!'));
  }
};
로그인 후 복사

하지만 응답 상태 코드는 모두 미리 정의되어 있으므로 코드가 다음과 같이 작성되는 것이 정상입니다. 이렇게 볼 수 있지만, 서버에서 오류가 발생할 때 백엔드가 일부 코드를 사용자 정의하고 해당 코드가 나타내는 오류를 프런트엔드에 알려주면 위 함수는 다음과 같이 될 수 있습니다. 

const handleWrongStatus = (status: string): void => {
  switch (status) {
    case 'A':
      // Do something...
      break;
    case 'B':
      // Do something...
      break;
    case 'C':
      // Do something...
      break;
    default:
      throw (new Error('No have wrong code!'));
  }
};
로그인 후 복사

이런 종류의 코드라면, 방금 물려받은 사람 혼자서는 2주 전에 썼다고 해도 문서를 보지 않고서는 그들이 무엇을 의미하는지 기억하지 못할 것입니다.

하지만 Enum을 잘 활용하면 위와 같은 상황을 피할 수 있습니다.

기본 사용법

먼저 Enum을 정의하는 방법을 살펴보겠습니다. 이는 객체 사용법과 매우 유사합니다. 

enum requestStatusCodes {
  error,
  success,
}
로그인 후 복사

내용과 이름 사이에 등호를 추가할 필요가 없습니다. 중괄호는 변수라기보다는 상수라고 부르는 것이 더 적절합니다. 왜냐하면 Enum의 값은 수정될 수 없기 때문입니다. 따라서 이렇게 정의된 규칙이 코드 실행 중에 변경될까 봐 걱정할 필요가 없습니다. , 실행 오류가 발생합니다.

그리고 Enum은 동일한 일련의 상수를 정의하는 데 사용되므로 이러한 상수는 특정 값을 유지할 수 있어야 합니다. 맞습니다. Enum의 모든 상수는 =를 통해 특정 값을 지정할 수 있습니다. = 来指定具体的值 。

但如果是像前面的 requestStatusCodes ，没有为 error 或 success 指定具体的值也不会出错，因为 TypeScript 会从 0 开始自动递增定义值，所以签名的 requestStatusCodes 会和下面的结果相同：

enum requestStatusCodes {
  error = 0,
  success = 1,
}console.log(requestStatusCodes.error) // 0
console.log(requestStatusCodes.success) // 1
로그인 후 복사

除了数字外，也可以定义为字串：

enum requestWrongCodes {
  missingParameter = 'A',
  wrongParameter = 'B',
  invalidToken = 'C',
}console.log(requestWrongCodes.wrongParameter) // 'B'
로그인 후 복사

当然也可以在一个 enum 中设定不同的类型，但这样一点意义都没有：

enum requestStatusCodes {
  error = 0,
  success = 'OK',
}
로그인 후 복사

了解基本的 Enum 怎么定义后，接着就来改写前面代码中的 handleResponseStatus 和 handleWrongStatus ，让它们在语义上能够更明确。

首先用 Enum 定义两者的状态描述：

enum requestStatusCodes {
  error = 400,
  success = 200,
}

enum requestWrongCodes {
  missingParameter = 'A',
  wrongParameterType = 'B',
  invalidToken = 'C',
}
로그인 후 복사

然后修改 handleResponseStatus 和 handleWrongStatus 中的 Switch 判断：

const handleResponseStatus = (status: number): void => {
  switch (status) {
    case requestStatusCodes.success:
      // Do something...
      break;
    case requestStatusCodes.error:
      // Do something...
      break;
    default:
      throw (new Error('No have status code!'));
  }
};

const handleWrongStatus = (status: string): void => {
  // 如果觉得 requestWrongCodes.missingParameter 太长了，也可以用以下方式：
  const { missingParameter, wrongParameterType, invalidToken, } = requestWrongCodes;
  switch (status) {
    case missingParameter:
      // Do something...
      break;
    case wrongParameterType:
      // Do something...
      break;
    case invalidToken:
      // Do something...
      break;
    default:
      throw (new Error('No have wrong code!'));
  }
};
로그인 후 복사

修改后的代码就变得直观多了，因为状态码都被放到了 Enum 中统一管理，所以就能用常量名来代表它们，之后不管过了多久，可以明确的知道这里再做什么，甚至连注解或文档都不用写了，因为代码就是最好的文档。

善用 Enum 能使代码绝对是不可或缺的，但就算没使用 TypeScript 也别灰心，因为 TypeScript 最终会被转换为 JavaScript ，那来看看如何直接用 JavaScript 实现 Enum 吧！

用原生 JavaScript 实现 Enum

在前面说过 Enum 很像 Object ，如果研究一下 Enum 被编译成 javascript 之后的代码，就会发现还真的是 Object。

Enum 被编译后会变成 Key 和 Value 反向对应的对象，这样看起来非常简单，为了方便使用，下面把它的编译方式写成一个函数：

const newEnum = (descriptions) => {
  const result = {};
  Object.keys(descriptions).forEach((description) => {
    result[result[description] = descriptions[description]] = description;
  });
  return result;
};

const responseStatus = newEnum({
  error: 400,
  success: 200,
});

// { '200': 'success', '400': 'error', error: 400, success: 200 }
console.log(responseStatus);
로그인 후 복사

虽然得到的结果相同，但是丧失了 Enum 中最可贵的常量特色，如果不能让它变成不可修改，那就有可能会在代码里不经意地改动它，导致执行结果可能出错，于是可以在最后利用 Object.freeze() ，让外部操作无法新增、删除或重新定义任何 Property ：

const newEnum = (descriptions) => {
  const result = {};
  Object.keys(descriptions).forEach((description) => {
    result[result[description] = descriptions[description]] = description;
  });
  return Object.freeze(result);
};

const responseStatus = newEnum({
  error: 400,
  success: 200,
});

// 即使不小心修改了
responseStatus['200'] = 'aaaaaaaa';

// 仍然是 { '200': 'success', '400': 'error', error: 400, success: 200 }
console.log(responseStatus);
로그인 후 복사

这样就能简单在 JavaScript 中实现 Enum 了。

const Enum 的用法

从前面的 JavaScript 代码中可以看到 Enum 编译过后会变成 Key 和 Value 互相对应的 Object ，也就是说不管是用 Key 还是Value 都可以取出对应的值，

但是如果用 const 声明 Enum ，编译之后就不会产生 Object。

直接看例子，假设我把 responseState 用 const 重新生命，且也是以 handleResponseStatus 使用该 Enum 做判断：

enum responseStatus {
  error = 400,
  success = 200,
}

const handleResponseStatus = (status: number): void => {
  switch (status) {
    case responseStatus.success:
      console.log('请求成功！');
      break;
    case responseStatus.error:
      console.log('请求失败！');
      break;
    default:
      throw (new Error('No have status code!'));
  }
};
로그인 후 복사

看起来一切正常，不过在编译后的 JavaScript 中，会发现 Enum 并没有产生 Object ，而是直接用 const 声明在 Enum 中的值。

用 const 声明 Enum 有几个好处：

  • 假设要用到的 Enum 非常多，那在执行时就会不停地使用 IIFE 产生 Object 将 Key 和 Value 绑定到 Object，会造成一些效率上的损失，也会增加内存，但是 const

    하지만 이전 requestStatusCodes와 같으면 error 또는 success에 특정 값을 지정하지 않으면 오류가 발생하지 않습니다. 0부터 시작하여 정의된 값을 자동으로 증가시키기 시작하므로 서명된 requestStatusCodes는 다음과 같은 결과를 갖게 됩니다. 🎜
    const enum responseStatus {
  error = 400,
  success = 200,
}// 会出错，因为已经没有对象可供查找了
console.log(responseStatus[400])// 但这个不会有问题，因为编译的时候会直接填值
console.log(responseStatus.error)// 编译后：
// console.log(400)
    로그인 후 복사
    로그인 후 복사
    🎜숫자 외에도 🎜rrreee🎜물론 enum에 다양한 유형을 설정할 수 있지만 이는 전혀 의미가 없습니다. 🎜rrreee🎜기본 Enum이 정의되는 방식을 이해한 후 handleResponseStatus</code를 다시 작성하세요. > 및 <code>handleWrongStatus(이전 코드)를 사용하여 의미론적으로 더 명시적으로 만듭니다. 🎜🎜먼저 Enum을 사용하여 두 가지의 상태 설명을 정의합니다. 🎜rrreee🎜그런 다음 handleResponseStatus 및 handleWrongStatus에서 스위치 판단을 수정합니다. 🎜rrreee🎜수정된 코드가 직관적이 됩니다. , 통합 관리를 위해 상태 코드를 Enum에 넣어서 상수 이름으로 표현할 수 있기 때문에 시간이 아무리 오래 걸려도 여기서 무엇을 해야 할지 명확하게 알 수 있고, 댓글이나 문서를 작성할 필요도 없습니다. . 코드가 최고의 문서이기 때문입니다. 🎜🎜Enum을 잘 활용하여 코드를 꼭 필요하게 만드세요. 하지만 TypeScript를 사용하지 않더라도 낙담하지 마세요. TypeScript는 결국 JavaScript로 변환되므로 Enum을 직접 JavaScript로 구현하는 방법을 살펴보겠습니다. 자바스크립트! 🎜🎜네이티브 JavaScript를 사용하여 Enum 구현🎜🎜앞서 Enum이 Object와 매우 유사하다고 말씀드렸는데요. Enum이 Javascript로 컴파일된 후 코드를 연구해 보면 실제로는 Object라는 것을 알 수 있습니다. 🎜🎜Enum은 컴파일된 후 Key와 Value의 반대 객체가 됩니다. 사용의 편의를 위해 컴파일 방법을 함수로 작성해 보겠습니다. 🎜rrreee🎜결과는 동일하지만 손실됩니다. Enum의 가장 중요한 🎜constant🎜 기능은 수정 불가능하게 만들 수 없으면 코드에서 실수로 변경되어 실행 결과에 오류가 발생할 수 있으므로 Object.freeze(( )</ code>를 사용하여 외부 작업에서 속성을 추가, 삭제 또는 재정의할 수 없도록 합니다. 🎜rrreee🎜이렇게 하면 Enum을 JavaScript로 쉽게 구현할 수 있습니다. 🎜🎜Const Enum 사용🎜🎜 이전 JavaScript 코드에서 볼 수 있듯이 컴파일 후 Enum은 Key와 Value가 서로 일치하는 객체가 됩니다. 즉, Key를 사용하든 Value를 사용하든 관계없이 다음을 얻을 수 있습니다. 해당 값, 🎜🎜🎜 그런데 <code>const로 Enum을 선언하면 컴파일 후에 Object가 생성되지 않습니다. 🎜🎜🎜예제를 직접 살펴보고 const로 responseState를 재생성하고 Enum을 사용하여 handleResponseStatus로 판단한다고 가정해 보겠습니다. 🎜 모든 것이 정상인 것처럼 보이지만 컴파일된 JavaScript에서는 Enum이 Object를 생성하지 않고 const를 직접 사용하여 Enum에서 값을 선언하는 것을 볼 수 있습니다. 🎜🎜const를 사용하여 Enum을 선언하면 여러 가지 장점이 있습니다. 🎜
    • 🎜사용할 Enum이 많다고 가정하면, 그런 다음 실행 중에 IIFE를 계속 사용하여 객체를 생성하고 키와 값을 객체에 바인딩합니다. 이로 인해 효율성 손실이 발생하고 메모리가 증가하지만 const는 객체를 생성하지 않으므로 객체가 생성되지 않습니다. 위의 문제. 🎜

    • 就算到的 Enum 不多，判断时也需要一直从 Object 中找出对应的值，而如果是用 const 声明 Enum ，在编译成 JS 时就将声明的值直接放入判断中。

    不过这样也就没法从 Enum 中反向取值了，因为它并不会产生对象：

    const enum responseStatus {
  error = 400,
  success = 200,
}// 会出错，因为已经没有对象可供查找了
console.log(responseStatus[400])// 但这个不会有问题，因为编译的时候会直接填值
console.log(responseStatus.error)// 编译后：
// console.log(400)
    로그인 후 복사
    로그인 후 복사

    更多编程相关知识，请访问：编程入门！！

    위 내용은 TypeScript에서 Enum(열거)의 사용법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
enum javascript typescript
원천：segmentfault.com
이전 기사：JavaScript로 장바구니 결제를 구현하는 방법 다음 기사：한 기사로 Node.js의 이벤트 루프를 빠르게 이해하세요.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿