ユーティリティタイプ

6119 ワード

導入


この記事では、タイプスクリプトのユーティリティの種類について説明し、その重要性を説明し、有用な例やユースケースも含めます.
ユーティリティの種類は、組み込み型を許可するtransform 新しい変更型への既存の型.

我々が言うtype A そして、私たちは新しいtype B それでinherit , modify or exclude からのプロパティtype A .
私たちはユーティリティタイプtype B = UtilityType<A, options> どこUtilityType 使用する型を表します.options 実行する操作の型を記述するinherit , modify or exclude など

Utility types aren't supported by primitives except strings which offer Intrinsic String Manipulation Types to manipulate strings.

Utility types are usually used with compound types such as Interfaces and Union Types.


始める前に
タイプスクリプトplayground ユーティリティ型で実験する優れた場所です.それは非常にトピックのあなたの理解を固めるために学ぶものを練習することをお勧めします.

ユニオンタイプ


ユニオンタイプは、2つ以上の他の型から形成された型です.これらの型のいずれかである可能性がある値を表します.我々は、組合員のメンバーとして、これらのタイプのそれぞれを参照してください.
ユニオンタイプcombine つ以上の型.
組合は以下のユーティリティタイプをサポートします:
  • Exclude
  • Extract
  • この例では、ユーティリティ型をユニオンで使用する方法を示します.

    Caveat: Union types are case-sensitive.


    type ActivityType =
      "Swimming"
      | "Reading"
      | "Coding"
      | "Dancing"
      | "Jogging";
    
    

    1 -エキス


    型への代入可能なすべてのユニオンメンバーから抽出する型を構築します.
    構文Extract<Type, Union>どこType は初期型とUnion 抽出したいエントリを表します.

    デモ


    type CognitiveActivity = Extract<ActivityType, "Reading" | "Coding">;
    // transformed type: "Reading" | "Coding"
    const activity: CognitiveActivity = "Reading"; 
    console.log(activity);
    
    

    2 -除外する


    代入できないメンバー全員に割り当てられるUnionTypeのすべてのUNIONメンバーから除外することで、型を構成します.
    構文Exclude<UnionType, ExcludedMembers>どこUnionType は初期型とExcludedMembers 除外するエントリを表します.

    デモ


    type PhysicalActivity = Exclude<ActivityType, "Reading" | "Coding">;
     // transformed type: "Swimming" | "Dancing" | "Exercise";
    const activity: PhysicalActivity = "Swimming";
    console.log(activity);
    
    

    型エイリアスとインターフェース

  • 型エイリアス:型別名は任意の型の名前です.
  • インターフェイス:インターフェイス宣言は、オブジェクトの型を指定する別の方法です.
  • この例では、ユーティリティ型を型別名とインターフェイスに使用する方法を示します.

    Intersection types are types that combine properties from two or more types. They're usually used in conjunction with the following utility types.


    一般的な構文は
    type A = {
    
    };
    type B = A & {
       bKey: string;
    }; // includes all the properties in A and B
    
    
    type ElectronicDevice = {
      name: string;
      USBPorts: USBPORT[];
      screenDimensions: Dimension;
      buttons: Buttons[];
      wifiConnectivity: boolean;
      manufacturer: string;
      memory: number;
    }
    
    
    このタイプは電子デバイスの特性を表す.電子装置はいろいろな形とサイズで来ます、しかし、彼らはボタン、記憶、港などのような多くの中心的な特徴を共有します.
    この例ではこのタイプの型をテストできますplayground .

    1 -ピック


    構文Pick<Type, Keys>プロパティキーのセット(文字列リテラルまたは文字列リテラルの結合)を型から選択して型を構成します.

    デモ


    type Calculator = Pick<ElectronicDevice, "name" | "buttons"> & {
      type: CalculatorType;
      // own types
    }
    
    

    2 -記録


    構文Record<Keys, Type>プロパティキーがキーで、プロパティの値が型のオブジェクト型を構築します.このユーティリティは、型のプロパティを別の型にマップするために使用できます.

    デモ


    type DeviceType = "Analogue" | "Digital";
    
    type SmartPhone = Record<DeviceType, ElectronicDevice> & {
      type: CalculatorType;
      // own types
    }
    
    const blackberry: SmartPhone = {
        Digital: {
    
        }
    }
    
    

    3 -省略


    構文Omit<Type, Keys>すべてのプロパティを型から選択し、キーを削除することによって型を構築します.

    デモ


    type StopWatch = Omit<ElectronicDevice, "wifiConnectivity" | "USBPorts">;
    
    

    4 - return型


    構文ReturnType<Type>関数型の戻り値型からなる型を構築します.

    デモ


    const getUserByActivity = async (type: string) => {
      const response = await apiCall(url, params); // fake api call
      return response.data;
    }
    type NewUser = ReturnType<typeof getUserByActivity>
    const user: NewUser = getUserByActivity(activity.type);
    
    
    参考文献
  • TypeScript Utility Types