TypeScriptでのEnum(列挙)の使い方について話しましょう

この記事では、TypeScript の Enum (列挙) 構文を紹介し、Enum の基本的な使用方法、およびネイティブ JavaScript を使用して Enum を実装する方法について説明します。

Enum

Enum は TypeScript の新しい構文であり、enumeration とも呼ばれます。通常、複数の を管理するために使用されます。状態判定には同じ系列の定数 (つまり変更できない変数) が使用されます。

Web における一般的なステータス判断は、リクエストの処理時にさまざまな応答ステータス コードを適切に処理することです。

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 を定義する方法を見てみましょう。使用方法は Object と非常によく似ています:

enum requestStatusCodes {
  error,
  success,
}

の間に等号を追加する必要はありません。 Enum の内容と名前 中括弧内に Enum の変数を直接記述します 変数というよりも定数と呼ぶ方が適切です 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'

もちろん、1 つの列挙型に異なる型を設定することもできますが、これはまったく意味がありません:

enum requestStatusCodes {
  error = 0,
  success = 'OK',
}

基本的な定義方法を理解した後Enum を使用して、前のコード #handleResponseStatus と handleWrongStatus の ## を書き換えて、意味的にわかりやすくします。

最初に Enum を使用して 2 つのステータスの説明を定義します:

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 に変換されるため、その方法を見てみましょう。 Enum を JavaScript で直接実装してください。

ネイティブ JavaScript を使用して Enum を実装する

前に述べたように、Enum は Object に非常に似ています。Enum が JavaScript にコンパイルされた後のコードを調べると、それが実際には Object であることがわかります。 。

Enum がコンパイルされると、Key と Value に対応するオブジェクトになります。これは非常に簡単に思えます。使いやすいように、そのコンパイル メソッドを関数として記述しましょう。得られる結果は同じですが、Enum の最も重要な

constant

機能が失われます。変更不可能にできない場合、コード内で誤って変更され、実行結果にエラーが発生する可能性があります。最後に

Object.freeze() を使用すると、外部操作でプロパティを追加、削除、再定義できなくなります。

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);

この方法により、JavaScript で Enum を簡単に実装できます。

const Enum の使用法

前の JavaScript コードから、コンパイル後、Enum は互いに対応するキーと値を持つオブジェクトになることがわかります。つまり、次のように使用できます。 Key または Value 対応する値

を取得しますが、

const

で Enum を宣言すると、コンパイル後に Object が生成されません。 例を直接見ると、const

で

responseState を再生成し、さらに Enum を使用して handleResponseStatus で判断するとします。 :

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 が 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 中国語 Web サイトの他の関連記事を参照してください。