ユーティリティタイプ
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
つ以上の型.
組合は以下のユーティリティタイプをサポートします:
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
.
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);
参考文献Reference
この問題について(ユーティリティタイプ), 我々は、より多くの情報をここで見つけました https://dev.to/junubiman/typescript-utility-types-am6テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol