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' はタイプ '{ 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年生"]; 次に、 // 実際の入力 Keys = "Freshman" | "sophomore" | "Junior" | "Senior" type Keys = typeof grades[number]; 最後に、データ型とデータは次のように記述できます。 タイプ Students = Partial<Record<Keys, string[]>>; 定数学生: 学生 = { 新入生: ["デビッド"、"ジョン"]、 ジュニア: ["リリー"]、 先輩: ["トム"], }; この形式では、オブジェクト キーは元の配列内の要素と構文上の関連がないため、エディターの「ジャンプ定義」は使用できません。 TypeScript の役割を示すために、コードを接続したままにしてください。そのため、型の制約のみがあり、接続を確立できないこのような操作は推奨されません。 関連リソース const アサーション keyof とルックアップ型 テキストは正常に更新されましたが、次のエラーが発生しました: 以上がTypeScriptにおけるオブジェクトキー名の値の範囲制限の詳細です。TypeScriptにおけるオブジェクトキー名の値の範囲制限の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Linux C バックグラウンドサービスプログラムの単一プロセス制御の実装
>>: Windows 8 での MySQL 5.6.15 のインストールと設定方法のグラフィック チュートリアル
この記事では、モグラ叩きゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...
私は頻繁にシステムをインストールするので、インストールのたびにいくつかのソフトウェアを再インストール...
序文:金額の保存など、小数点数を保存し、精度要件がある場合、通常は DECIMAL フィールド タイ...
まず、サーバー環境情報: アンインストールの理由:しばらくするとホストマシンのディスクが100%にな...
通常、デッドロックが発生すると、重みが最も小さい接続が強制終了され、ロールバックされます。ただし、最...
目次MySQL 複数インスタンスマルチインスタンスの概要マルチインスタンスとは何ですか?複数のインス...
この記事では、例を使用して、MySQL ストアド プロシージャで複数の値を返す方法について説明します...
バブリングとは何ですか? DOM イベント フローには、イベント キャプチャ ステージ、ターゲット ...
1. 機能紹介sed (Stream EDitor) は、コンテンツを 1 行ずつ処理するストリーム...
データベースに関して最もよく聞かれる質問の 1 つは、現在のビジネス ニーズを満たす MySQL の...
目次序文1. リクエスト内容が大きすぎる解決: CDN の紹介リクエストリソースを圧縮する1. HT...
1. KVM仮想マシンの移行方法と注意すべき点KVM 仮想マシンを移行する方法は 2 つあります。...
目次双方向データバインディングとは双方向データバインディングの実装データ影響ビュービューはデータに影...
序文この記事はかなり詳細で、少し面倒です。他のチュートリアル ドキュメントでは多くの手順が省略されて...
1. まず、コンピュータのデスクトップにある VMware アイコンをダブルクリックしてソフトウェア...