ホームページ > ウェブフロントエンド > jsチュートリアル > タイプスクリプトのレコードタイプを理解するための包括的なガイド

タイプスクリプトのレコードタイプを理解するための包括的なガイド

Joseph Gordon-Levitt
リリース: 2025-02-08 11:03:10
オリジナル
184 人が閲覧しました

A Comprehensive Guide to Understanding TypeScript Record Type

このガイドは、一貫した値タイプを持つオブジェクトを作成するための強力なツールであるTypeScriptの<script>、<code>Record、&lt;code&gt;Partial。 &lt;code&gt;Pick&lt;code&gt;Readonlyタイプ&lt;p&gt; &lt;strong&gt;を理解します &lt;code&gt;Recordタイプでは、すべての値が同じタイプを共有するオブジェクトタイプを定義できますが、キーは異なる場合があります。 その定義は次のとおりです &lt;p&gt; &lt;code&gt;Record:可能なキーを定義する弦リテラルまたは組合から派生したタイプの組合。 &lt;div class=&quot;code&quot; style=&quot;position:relative; padding:0px; margin:0px;&quot;&gt;&lt;div class=&quot;code&quot; style=&quot;position:relative; padding:0px; margin:0px;&quot;&gt;&lt;pre class='brush:php;toolbar:false;'&gt;Record&amp;lt;Keys, Type&amp;gt;&lt;/pre&gt;&lt;div class=&quot;contentsignin&quot;&gt;ログイン後にコピー&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;contentsignin&quot;&gt;ログイン後にコピー&lt;/div&gt;&lt;/div&gt;&lt;ul&gt;:キーに関連付けられているすべての値のタイプ&lt;li&gt; &lt;code&gt;Keys</code> たとえば、</li><li>すべてのキーが文字列であり、すべての値が数字であるオブジェクトを作成します。 <code>Type</code> </li></ul>vs. <p> <code>Record&lt;string, number&gt;</code></p> <p>両方ともデータ収集を処理しますが、大きく異なります:<strong> <code>Record</code> <code>Tuple</code> </strong> </p> <p>:固定値タイプの名前付きプロパティ。 キー価値マッピングに最適です </p> <ul> <li><strong>:それぞれが異なるタイプで潜在的に潜在的に順序付けられた要素のリスト。 固定サイズのコレクションに役立ちます。<code>Record</code> </strong> </li>例:<li> <strong> <code>Tuple</code></strong>basic</li>usage </ul><p> </p> a<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// Record: string keys, number values type AgeMap = Record&lt;string, number&gt;; // Tuple: string and number in specific order type Person = [string, number];</pre><div class="contentsignin">ログイン後にコピー</div></div>の定義には、キータイプと値タイプの指定が含まれます <p> <strong><code>Record</code>実用的なアプリケーション</strong></p> <p> <code>Record</code> </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// Object with string keys and string values type User = Record&lt;string, string&gt;;</pre><div class="contentsignin">ログイン後にコピー</div></div>徹底的なケースハンドリング:<p>列挙または組合のすべてのケースが処理されていることを確認してください:<strong> </strong> </p> <ol> <li><p>汎用型チェック:<strong>レコードを生成する再利用可能な関数を作成します:</strong> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>enum Status { Pending, Completed, Failed } const statusMessages: Record&lt;Status, string&gt; = { [Status.Pending]: &quot;Request pending...&quot;, [Status.Completed]: &quot;Request complete!&quot;, [Status.Failed]: &quot;Request failed.&quot; };</pre><div class="contentsignin">ログイン後にコピー</div></div> </li> データマッピングへの列挙<li><p>列挙:<strong>enumsからルックアップテーブルを作成:</strong> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function createRecord&lt;K extends string, T&gt;(keys: K[], value: T): Record&lt;K, T&gt; { return keys.reduce((acc, key) =&gt; ({ ...acc, [key]: value }), {}); }</pre><div class="contentsignin">ログイン後にコピー</div></div> </li> <li><p>ルックアップテーブル:<strong>キーを値に効率的にマッピング:</strong> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>enum Color { Red, Green, Blue } const colorHex: Record&lt;Color, string&gt; = { };</pre><div class="contentsignin">ログイン後にコピー</div></div> </li> <li><p><strong>タイプ</strong> </p>を繰り返します <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>type CountryCode = &quot;US&quot; | &quot;CA&quot;; interface CountryInfo { name: string; } const countries: Record&lt;CountryCode, CountryInfo&gt; = { US: { name: &quot;United States&quot; }, CA: { name: &quot;Canada&quot; } };</pre><div class="contentsignin">ログイン後にコピー</div></div>いくつかの方法で反復を可能にします:</li> </ol> <p><strong>:キーと価値のペアを反復します。<code>Record</code> </strong></p>:キーを繰り返します。<p> </p><ul>:キーの配列を返します。<li> <code>Object.entries()</code></li>:値の配列を返します。<li> <code>for...in</code> </li><li>ユーティリティタイプを使用した高度な使用<code>Object.keys()</code></li> <li> <code>Object.values()</code>と他のユーティリティタイプを組み合わせると、その機能が向上します:</li> </ul> <p> <strong> </strong> </p> <p>:特定のプロパティを選択します:<code>Record</code> </p> <ul> <li> <p> <strong> <code>Pick</code> </strong>:不変のオブジェクトを作成します:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>type Product = { name: string; price: number; description: string }; type ShortProduct = Pick&lt;Product, &quot;name&quot; | &quot;price&quot;&gt;;</pre><div class="contentsignin">ログイン後にコピー</div></div> </li> <li> <p><strong> <code>Readonly</code> </strong>:プロパティをオプションにします:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>Record&lt;Keys, Type&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <li> <p><strong>ネストされた<code>Records:複雑な階層データ構造を作成します <p>結論<strong> <p>タイプは、タイプスクリプトの貴重な資産であり、一貫した値タイプのオブジェクトを管理するための簡潔でタイプに安全な方法を提供します。 その柔軟性は、他のユーティリティタイプと組み合わせて、堅牢で保守可能なコードを作成できます。 さらに調査するには、公式タイプスクリプトのドキュメントとその他のリソースを参照してください。</script>

以上がタイプスクリプトのレコードタイプを理解するための包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート