【TypeScript】型パズルで大活躍!! Mapped typeについて
どうもフロントエンドエンジニアの です。
今回は、型パズルで大活躍するMapped typeに関して整理します。
1 Mapped typeについて
1-1 Mapped type
Mapped typeは、{ [P in K] : T }
の様な形をとります。ユニオン型K
の構成要素P
に対して、P
というプロパティが型T
を持つオブジェクト型を生成してくれます。
具体的には、Mapped typeを使うと、下記のようにユニオン型EVASeries
の構成要素EVA0
、EVA1
、EVA2
のプロパティを持ち、それらの型がstring
であるオブジェクトPilots
を生成できます。
type EVASeries = "EVA0" | "EVA1" | "EVA2"
type Pilots = {
[key in EVASeries] : string
}
Pilots
の型は👇の様になります。
type Pilots = {
EVA0 : string;
EVA1 : string;
EVA2 : string;
}
const pilots:Pilots ={
EVA0 : "rei",
EVA1 : "shinji",
EVA2 : "asuka",
}
1-2 Homomorphic mapped type
Homomorphic mapped typeは、{ [P in keyof T] : U }
のような形をとります。オブジェクト型T
のプロパティP
に対して、型U
を持つようなオブジェクトを生成します。既存のオブジェクト型に対して、何かしらの加工を加えたい時に使用されるもので、ユーティリティ型のReadonly<T>
では👇のように使用されています。
type Readonly<T> = {
readonly [P in keyof T] : T[P];
};
Readonly<T>
では、例えば👇の様に、にオブジェクト型Pilots
を渡すと、Homomorphic mapped typeによって、プロパティであるEVA0
、EVA1
、EVA2
をReadonly
のstring
型に変換してくれます。
type Pilots = {
EVA0 : string;
EVA1 : string;
EVA2 : string;
}
type ReadonlyPilots = Readonly<Pilots>
ReadonlyPilots
は、👇の様になります。
type ReadonlyPilots = {
readonly EVA0 : string;
readonly EVA1 : string;
readonly EVA2 : string;
}
因みに、Homomorphic mapped typeで使用されているGenerics
型に関しては、こちらの記事をご参照ください。また、keyof
を使用すると、オブジェクト型からプロパティ名の型を取得することができます。
2 最後に
ユーティリティ型を自分で作るとわかりますが、これらはオブジェクト型への変換やオブジェクト型を加工する際に大活躍する機能です。型安全にコードを書くには、押さえておきたい内容ですね。
3 参考
Author And Source
この問題について(【TypeScript】型パズルで大活躍!! Mapped typeについて), 我々は、より多くの情報をここで見つけました https://zenn.dev/oreo2990/articles/249fa60986aad5著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol