Lassen Sie uns über die Verwendung von Enum (Aufzählung) in TypeScript sprechen

Dieser Artikel führt Sie in die Enum-Syntax (Aufzählung) in TypeScript ein, spricht über die grundlegende Verwendung von Enum und wie Sie natives JavaScript zur Implementierung von Enum verwenden.

Enum

Enum ist eine neue Syntax in TypeScript, auch enumeration genannt. Sie wird im Allgemeinen zum Verwalten mehrerer Konstanten derselben Reihe (d. h. Variablen, die nicht geändert werden können) verwendet, die zur Zustandsbeurteilung verwendet werden.

Eine im Web übliche Statusbeurteilung besteht darin, bei der Verarbeitung von Anfragen unterschiedliche Antwortstatuscodes entsprechend zu behandeln:

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!'));
  }
};

Aber da die Antwortstatuscodes alle vordefiniert sind, gibt es keine Kontroversen. Der Code ist normal geschrieben Es ist so, aber wenn das Backend einige Codes anpasst, wenn ein Fehler auf dem Server auftritt, und dem Frontend mitteilt, welche Fehler diese Codes darstellen, dann könnte die obige Funktion so aussehen:

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!'));
  }
};

Wenn dies der Code ist, geschweige denn jemand, der Ich habe es gerade erst übernommen, selbst wenn Sie es vor zwei Wochen geschrieben haben, werden Sie sich wahrscheinlich nicht daran erinnern können, was sie darstellen, ohne die Dokumente durchzusehen.

Aber wenn Sie Enum gut nutzen, können Sie die oben genannte Situation vermeiden.

Grundlegende Verwendung

Sehen wir uns zunächst an, wie Enum definiert wird. Es ist der Verwendung von Object:

enum requestStatusCodes {
  error,
  success,
}

Es ist nicht erforderlich, ein Gleichheitszeichen zwischen dem Inhalt und dem Namen einzufügen In der Aufzählung in geschweiften Klammern ist es angemessener, sie als Konstante zu bezeichnen, da die Werte in der Aufzählung nicht geändert werden können, sodass kein Grund zur Sorge besteht, dass sich diese definierten Regeln während der Aufzählung ändern Ausführung des Codes, was zu Ausführungsfehlern führt.

Und da Enum zum Definieren derselben Reihe von Konstanten verwendet wird, sollten diese Konstanten in der Lage sein, bestimmte Werte beizubehalten. Das ist richtig, jede Konstante in Enum kann über = einen bestimmten Wert angeben. = 来指定具体的值 。

但如果是像前面的 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

  Aber wenn es wie die vorherigen requestStatusCodes ist, wird es keinen Fehler geben, wenn kein spezifischer Wert für error oder success angegeben wird, weil TypeScript beginnt bei 0 und erhöht automatisch den definierten Wert, sodass die signierten requestStatusCodes das gleiche Ergebnis wie das folgende haben: 🎜

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

  🎜Zusätzlich zu Zahlen kann es auch als Zeichenfolge definiert werden: 🎜rrreee🎜Natürlich können Sie verschiedene Typen in einer Aufzählung festlegen, aber das macht überhaupt keinen Sinn: 🎜rrreee🎜Nachdem Sie verstanden haben, wie die grundlegende Aufzählung definiert ist, schreiben Sie den handleResponseStatusneu > und handleWrongStatus im vorherigen Code , um sie semantisch expliziter zu machen. 🎜🎜Verwenden Sie zuerst Enum, um die Statusbeschreibungen der beiden zu definieren: 🎜rrreee🎜Dann ändern Sie die Switch-Beurteilung in handleResponseStatus und handleWrongStatus: 🎜rrreee🎜Der geänderte Code wird intuitiver , da die Statuscodes zur einheitlichen Verwaltung in Enum abgelegt werden, sodass sie durch konstante Namen dargestellt werden können. Egal wie lange es dauert, Sie wissen hier klar, was zu tun ist, und müssen nicht einmal Kommentare oder Dokumente schreiben . Weil Code die beste Dokumentation ist. 🎜🎜Nutzen Sie Enum sinnvoll, um Ihren Code absolut unverzichtbar zu machen. Lassen Sie sich jedoch nicht entmutigen, auch wenn Sie TypeScript nicht verwenden, da TypeScript irgendwann in JavaScript konvertiert wird. Schauen wir uns also an, wie Sie Enum direkt implementieren JavaScript! 🎜🎜Verwenden Sie natives JavaScript, um Enum zu implementieren🎜🎜Ich habe bereits gesagt, dass Enum Object sehr ähnlich ist. Wenn Sie den Code studieren, nachdem Enum in Javascript kompiliert wurde, werden Sie feststellen, dass es sich tatsächlich um Object handelt. 🎜🎜Enum wird nach der Kompilierung zum umgekehrten entsprechenden Objekt von Schlüssel und Wert. Der Einfachheit halber schreiben wir die Kompilierungsmethode als Funktion: 🎜rrreee🎜Obwohl das Ergebnis dasselbe ist, geht es verloren Die wertvollste 🎜konstante🎜-Funktion in Enum: Wenn Sie sie nicht unveränderlich machen können, können Sie sie versehentlich im Code ändern, was zu möglichen Fehlern in den Ausführungsergebnissen führen kann. Sie können also Object.freeze(( ) verwenden. code>, sodass externe Operationen keine Eigenschaft hinzufügen, löschen oder neu definieren können: 🎜rrreee🎜Auf diese Weise kann Enum einfach in JavaScript implementiert werden. 🎜🎜Verwendung von const Enum🎜🎜Aus dem vorherigen JavaScript-Code können Sie ersehen, dass Enum nach der Kompilierung zu einem Objekt wird, dessen Schlüssel und Wert einander entsprechen. Das heißt, unabhängig davon, ob Sie Schlüssel oder Wert verwenden, können Sie das erhalten entsprechender Wert, 🎜🎜🎜 Aber wenn Sie Enum mit <code>const deklarieren, wird das Objekt nach der Kompilierung nicht generiert. 🎜🎜🎜Schauen Sie sich das Beispiel direkt an. Angenommen, ich generiere responseState mit const neu und verwende auch Enum, um mit handleResponseStatus Urteile zu fällen: 🎜rrreee 🎜 Alles scheint normal zu sein, aber im kompilierten JavaScript werden Sie feststellen, dass Enum kein Objekt generiert, sondern const direkt verwendet, um den Wert in Enum zu deklarieren. 🎜🎜Die Verwendung von const zum Deklarieren von Enum hat mehrere Vorteile: 🎜
  • 🎜Angenommen, es müssen viele Enums verwendet werden, Dann wird während der Ausführung weiterhin IIFE verwendet, um ein Objekt zu generieren und Schlüssel und Wert an das Objekt zu binden, was zu Effizienzverlusten und einer Erhöhung des Speichers führt. const generiert jedoch kein Objekt, sodass dies nicht der Fall ist die oben genannten Probleme. 🎜

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

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

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

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

Das obige ist der detaillierte Inhalt vonLassen Sie uns über die Verwendung von Enum (Aufzählung) in TypeScript sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!