TypeScript でオブジェクト キーの値の範囲を制限する方法

TypeScript でオブジェクト キーの値の範囲を制限する方法

TypeScript を使用する場合、TypeScript が提供する型システムを使用してコードのあらゆる側面を制約する必要がありますが、オブジェクトのキー値も例外ではありません。

たとえば、各学年の人の名前を格納するオブジェクトがあり、その型は次のようになります。

Students = Record<文字列、文字列[]>と入力します。

もちろん、データは次のようになります。

定数学生: 学生 = {
  新入生: ["デビッド"、"ジョン"]、
  2年生: [],
  ジュニア: ["リリー"]、
  先輩: ["トム"],
};

オブジェクトキーを列挙に制限する

上記のデータ型の問題点は、グレードに可能な値の数が限られているのに、オブジェクトに属性を任意に追加できるため、データが不純に見えることです。

そこで、可能な値をリストするための新しい列挙を追加します。

エクスポート列挙グレード{
  新入生、
  2年生、
  ジュニア、
  シニア、
}

ここで、オブジェクトのキーを上記の列挙に制限します。

- タイプ Students = Record<string, string[]>;
+ タイプ Students = Record<Grade, string[]>;

データは次のように記述できます。

定数学生: 学生 = {
  [Grade.Freshman]: ["David", "John"],
  [学年.2年生]: [],
  [学年.ジュニア]: ["リリー"],
  [Grade.Senior]: ["Tom"],
  // ❌ オブジェクトリテラルは既知のプロパティのみを指定でき、'blah' は 'Students' 型には存在しません。ts(2322)
  blah: ["誰か"],
};

このように、オブジェクト上のキー名の範囲は制限されます。列挙外のキーが追加されるとエラーが報告されることがわかります。

より意味のある列挙値

ただし、列挙値はデフォルトで 0 から始まる数値になるため、上記のアプローチはまだ不適切であり、オブジェクトのプロパティにアクセスするときに反映されるキー値として十分な意味を持ちません。

列挙型を修正して、値としてより意味のあるテキストを使用しましょう。

エクスポート列挙グレード{
  新入生 = 「新入生」、
  2年生 = 「2年生」、
  ジュニア = 「ジュニア」、
  シニア = 「シニア」、
}

ここで、列挙を再度使用すると、取得する数値はもはや無意味ではありません。

必要に応じて、列挙値を中国語にすることもできます。

エクスポート列挙グレード{
  新入生 = 「新入生」、
  2年生 = 「2年生」、
  ジュニア = 「ジュニアガール」
  シニア = 「シニアドライバー」
}

以下の使用には問題はありません:

キー値はオプション

上記の型定義には別の問題があり、それは、使用時にオブジェクトに列挙内のすべての値が含まれている必要があることです。たとえば、 sophomoreの学年には one がないので、書き込むことはできませんが、エラーが報告されます。

// ❌ プロパティ 'sophomore' はタイプ '{ Freshman: string[]; Junior: string[]; Senior: string[]; }' にありませんが、タイプ 'Students' には必要です。ts(2741)
定数学生: 学生 = {
  [Grade.Freshman]: ["David", "John"],
  // [Grade.sophomore]: [],
  [学年.ジュニア]: ["リリー"],
  [Grade.Senior]: ["Tom"],
};

したがって、最適化タイプはオプションです。

タイプ Students = Partial<Record<Grade, string[]>>;

オプションの値が列挙型で定義されておらず、配列から取得される場合、

const grades = ["新入生", "2年生", "3年生", "4年生"];

つまり、配列内の値をユニオン型に抽出する必要があります。

まず、const アサーションを使用して配列をタプル型に変換します。

const grades = <const>["新入生", "2年生", "3年生", "4年生"];

次に、 typeofと Lookup Types を使用して最終的なユニオン型を取得します。

// 実際の入力 Keys = "Freshman" | "sophomore" | "Junior" | "Senior"
type Keys = typeof grades[number];

最後に、データ型とデータは次のように記述できます。

タイプ Students = Partial<Record<Keys, string[]>>;

定数学生: 学生 = {
  新入生: ["デビッド"、"ジョン"]、
  ジュニア: ["リリー"]、
  先輩: ["トム"],
};

この形式では、オブジェクト キーは元の配列内の要素と構文上の関連がないため、エディターの「ジャンプ定義」は使用できません。

TypeScript の役割を示すために、コードを接続したままにしてください。そのため、型の制約のみがあり、接続を確立できないこのような操作は推奨されません。

関連リソース

const アサーション

keyof とルックアップ型

テキストは正常に更新されましたが、次のエラーが発生しました:

以上がTypeScriptにおけるオブジェクトキー名の値の範囲制限の詳細です。TypeScriptにおけるオブジェクトキー名の値の範囲制限の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Typescript での infer キーワードの使用に関する詳細な理解
  • TypeScript の Enum が問題となる理由
  • TypeScript をインストール、使用、自動コンパイルする方法に関するチュートリアル
  • Vue の新しいパートナー TypeScript クイックスタート実践記録
  • TypeScript のマップされた型とより優れたリテラル型推論について説明します。
  • TypeScript 3.7 で注目すべき 3 つの新機能について簡単に説明します。
  • TypeScript 2.0 マーク付き共用体型の詳細な説明
  • TypeScript 関数の定義と使用例のチュートリアル

<<:  Linux C バックグラウンドサービスプログラムの単一プロセス制御の実装

>>:  Windows 8 での MySQL 5.6.15 のインストールと設定方法のグラフィック チュートリアル

ブログ    

推薦する

JS配列メソッドの詳細な説明

目次1. 元の配列が変更されます1. プッシュ(): 2.ポップ(): 3. シフト(): 4.un...

iOS、Android、ミニプログラムアプリの敷居の低い開発のためのフロントエンドフレームワークを詳しく解説

現在、クロスプラットフォーム開発技術はもはや新しい話題ではありません。市場にはいくつかのオープンソー...

M1 ProチップでVueプロジェクトを開始する方法

目次導入Homebrewをインストールするnvmをインストールするノードをインストールするインストー...

InnoDB の主な機能 - 挿入キャッシュ、2 度書き込み、適応ハッシュ インデックスの詳細

InnoDB ストレージ エンジンの主な機能には、挿入バッファ、二重書き込み、適応ハッシュインデック...

CSS3 を使用した背景ぼかし効果の 3 つの例

導入から始めず、いきなり本題に入りましょう。通常の背景ぼかし効果は次のとおりです。 プロパティを使用...

MySQL 8.0.16 圧縮版のダウンロードと Win10 システムへのインストール チュートリアル

公式サイトからダウンロード: https://www.mysql.com MySQLの公式サイトにア...

React 関数コンポーネントのパフォーマンス最適化のアイデアの詳細な説明

最適化のアイデア最適化には主に 2 つの方向があります。再レンダリングの回数を減らします。 Reac...

Nginx での SSL 証明書のインストールと展開手順の概要

目次問題の説明:インストール手順1. 準備2. サーバーにリモート接続する3. 証明書と秘密鍵ファイ...

MySQLデータベースでゼロ値を含む日付の問題について簡単に説明します

デフォルトでは、MySQL は日付に 0 値を挿入することを受け入れますが、実際には日付の 0 値に...

JavaScript フロー制御 (ループ)

目次1. forループ2. 二重の for ループ3. whileループ4. dowhileループ5...

CSS3マスクレイヤーのくり抜き効果を実現するさまざまな方法

この記事では、マスク レイヤーの中空化を実現する 4 つの方法を紹介します。みんなと共有し、自分用の...

MySql で、存在しない場合は挿入し、存在する場合は更新する方法

まとめシナリオによっては、レコードがない場合は挿入し、レコードがある場合は更新するという要件がある場...

MySQL SQL ステートメントが遅い場合の一般的な原因と解決策

1. インデックス不足または無効なインデックスによるクエリの遅延数千万件のデータを含むテーブルで、イ...

インストールされていないバージョンの MySQL を使用する手順とパスワードを忘れた場合の解決策

最初のステップは、圧縮されたパッケージを対応するディスクに解凍することです。 2 番目の手順は、cm...

LeetCode の SQL 実装 (197. 気温上昇)

[LeetCode] 197.気温上昇Weather テーブルが指定されている場合、前の日付 (昨...