高度なTypeScriptユーティリティタイプが説明されています

タイプtから指定された属性kを選択します。新しいタイプを作成します。これは、API応答などに必要なフィールドのサブセットを抽出するのに適しています。 2。省略は、敏感なフィールドまたは内部フィールドを含まないパブリックインターフェイスを作成するのに適したタイプTから指定された属性kを除外します。 3.除外 nullや数などの不要なタイプをフィルタリングするためによく使用されるユニオンタイプTからuに割り当てることができるタイプメンバーを削除します。 4.抽出混合組合タイプから特定のタイプを抽出するのに適したユニオンタイプTでuに割り当てることができるタイプメンバーを保持します。 5。レコードは、キーkと値tを持つオブジェクト構造を作成します。これは、マッピングまたは構成管理のルーティングに適しています。ここで、kは文字列、数字、シンボルまたはリテラルユニオンタイプでなければなりません。 6。パラメーター関数タイプtのパラメータータイプをタプルとして抽出します。高次関数のカプセル化に適しています。 7。returnType 抽出された関数タイプTのreturn値タイプタイプTのタイプを抽出して、戻り構造の繰り返し定義を避けます。 8。非nullable nullを除去し、タイプtから未定義で除去します。 9.必須フォームの提出前のデータ検証に適したすべてのオプションの属性を必要なものにします。 10。Partialすべての属性をオプションに変換し、多くの場合、更新操作に使用されます。 11。ThisTypeは、オブジェクトメソッドでこれのタイプを指定するために使用され、主にフレームワーク設計に使用される-noimplicthisが必要です。さらに、ビルトインツールタイプを組み合わせて、のディスプレイを最適化し、をマージするなどのカスタムタイプを作成して、タイプのマージカバレッジを実装できます。これらの高度なツールタイプのアップグレードタイプスクリプトからタイプアノテーションからタイププログラミング、コードセキュリティと保守性が向上します。

TypeScriptのユーティリティタイプは、既存のタイプを操作して清潔で再利用可能な方法で変換できる強力なツールです。 Partial<t></t>やReadonly<t></t>などの基本的なものは広く知られていますが、TypeScriptは、洗練されたタイププログラミングのロックを解除するより高度なユーティリティタイプも提供します。最も便利な高度なユーティリティタイプ、つまり彼らが何をするか、どのように働くか、いつ使用するかに飛び込みましょう。

1。 Pick<t k></t>およびOmit<t k></t> - 選択型変換

これら2つは、特定のプロパティを選択または除外することにより、新しいタイプを作成するために不可欠です。

• Pick<t k></t> ：型TのKにリストされているプロパティのみを備えた型。

  

  インターフェイスユーザー{
    ID：番号;
    名前：文字列;
    電子メール：文字列;
    年齢：数;
  }
  
  タイプuserPreview = pick <user、 &#39;id&#39; | 「名前」>;
  // {id：number;名前：文字列; }

  API応答またはフォーム入力のために、フィールドのサブセットを抽出したい場合に役立ちます。

• Omit<T, K> ： Pickの反対。 KのキーをTから削除します。

  

   type publicuser = omit <user、 &#39;email&#39; | 「年齢」>;
  // {id：number;名前：文字列; }

  公共のインターフェイスに敏感または内部のフィールドを隠すのに最適です。

？ヒント：コンポーネントまたは小道具インターフェイスを拡張しているが、特定の継承された小道具を除外したい場合はOmit<T, K>特に便利です。

2。 Extract<T, U>し、 Exclude<T, U>

これらのユーティリティは、組合タイプで動作し、割り当てに基づいてメンバーを除外できます。

• Exclude<T, U> ： T U割り当てられた任意のタイプから削除します。

  タイプステータス= 'ロード' | 「成功」| 「エラー」| 404;
  type stringstatus = exclude <status、number>;
  // &#39;ロード&#39; | 「成功」| &#39;エラー&#39;

  一般に、組合から不要な種類を剥ぎ取るために使用されます。EG、 nullまたはundefined除去。

• Extract<T, U> ： Uに割り当てられたTの部分のみを保持します。

   type numbersonly = extract <status、number>;
  // 402

  混合組合から特定の種類の価値を分離したい場合に便利です。

これらは、フードの下で条件付きタイプを使用して構築されています。

タイプ除外<t、u> = tはuを拡張しますか？決して：t;
抽出<t、u> = tはuを拡張しますか？ T：決して;

3。 Record<K, T> - 柔軟なキー価値マッピング

タイプKのキーとタイプTの値を持つオブジェクトタイプを作成します。

タイプroutes = 'home' | 'about' | '接触';
constページ：録音<routes、string> = {
  家： &#39;/&#39;、
  概要： &#39;/about&#39;、
  連絡先：「/連絡先」、
};

構成または状態のマッピングにも役立ちます。

型configmap = record <string、{enabled：boolean;タイムアウト：番号}>;

⚠⚠️K K string | number | symbol 、または文字通りタイプの結合。複雑なオブジェクトをキーとして使用することはできません。

4。 Parameters<T>およびReturnType<T> - 関数の署名導入

これらは、関数の署名からタイプを直接抽出することができます。

• Parameters<T> ：関数のパラメータータイプのタプルを生成します。

  関数createUser（name：string、age：number）：void {}
  type createargs = parameters <typeof createUser>;
  // [名前：文字列、年齢：番号]

  高次関数やラッパーに非常に便利です：

  機能<f extends（... args：any []）=> any>（
    fn：f、
    ロガー：（... args：any []）=> void
  ）：（... args：parameters <f>）=> returnType <f> {
    return（... args）=> {
      logger（ &#39;with：&#39;、args）の呼び出し）;
      fn（... args）を返す;
    };
  }

• ReturnType<T> ：関数の戻りタイプを抽出します。

  タイプapiresponse = returnType <（）=> {data：any;ステータス：番号}>;
  // {データ：any;ステータス：番号}

  構造を複製せずに関数の出力に基づいて変数を入力する場合によく使用されます。

5。NONNULLABLE NonNullable<T> - nullを削除してundefined

nullとタイプからundefinedストリップ。

タイプmaybestring = string | null |未定義;
タイプempulationString = nonullable <MayBestring>; // 弦

これは、Nullableタイプを返すAPIまたはDOMメソッドを操作する場合に特に役立ち、すでに存在をチェックしています。

フードの下：

 NONULLABLE <T> = Tはnull |を拡張します未定義 ？決して：t;

6. Required<T>およびPartial<T> - オプションのプロパティの処理

Partial<T>はよく知られていますが、 Required<T>は特定の場合にも同様に役立ちます。

• Partial<T> ：すべてのプロパティをオプションにします。
• Required<T> ：必要なすべてのプロパティを作成します。

インターフェイスフォームフィールド{
  ラベル？：文字列;
  値？：文字列;
  触れましたか？：boolean;
}

タイプCompleteField =必須<Forfield>;
//すべてのフィールドが必要になりました

オブジェクトにすべてのプロパティが埋め込まれていることを強制するときにRequired使用（例：提出または検証の前）。

7。ThisType ThisType<T> - 高度なコンテキストタイピング（まれですが強力）

ThisTypeタイプを変換しません。 thisがオブジェクト内にあるべきものをTypeScriptに伝えます。

 typeMyobj = {
  sayhello（）：string;
  getname（）：string;
}＆thisType <{getName（）：string;年齢：番号}>;

const obj：myobj = {
  sayhello（）{
    `hello、$ {this.getName（）}を返します！あなたは$ {this.age} `; //✅ `これは「年齢」と「getName」について知っています
  }、
  getName（）{
    「匿名」を返します。
  }、
};

obj.sayhello（）;

これには、 --noImplicitThisが必要であり、通常、フレームワークの設計または流fluent APIで使用されます。

ボーナス：カスタムユーティリティタイプパターン

これらを組み合わせて、独自の高度なユーティリティを作成できます。

• Prettify<T> - エラーメッセージでネストされたインタラクションタイプをクリーンアップします。

   Type Prettify <t> = {
  }＆{};

• Merge<T, U> - 2つのタイプをU T組み合わせます。

  タイプマージ<t、u> = omit <t、keyof u>＆u;

  構成のオーバーライドまたはテーマ拡張機能に役立ちます。

これらの高度なユーティリティタイプは、タイプスクリプトプロジェクトが複雑になるにつれて不可欠になります。それらは、それらを複製するのではなく、タイプを再利用および変換することにより、より安全で維持されたコードを書くのに役立ちます。

基本的に、 Pick 、 Omit 、 Parameters 、およびReturnTypeの組み合わせを開始すると、タイプに注目を集めなくなりました。

以上が高度なTypeScriptユーティリティタイプが説明されていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。