型ガードについて勉強したのでアウトプットします。
型ガードとは
型ガードとはその名の通り型を判断するときに使用するものです。例えばUnion型のように2つ型を持っているものに対して役に立ちます。
型ガードの使い方
1.typeof演算子
tepeof演算子での型ガードの書き方は typeof~ と書きます。typeofはJavascript上でのデータ型を判別するものです。
let firstName = "tanaka"; //TypeScriptの型推論で型はstring
if (typeof firstName === "string") { //(typeof firstName === "string")が型ガード
console.log('string型です');
} else{
console.log('number型です');
}
//string型です
上記のようにifの条件を「型」で分岐させることができました。
また、2つの型をもつ場合の動きを以下のsum関数を使ってを見てみます。
function rideVehicle(abc: carBike) {
console.log(abc.color);
if ("weight" in abc) {
console.log(abc.weight);
} else {
console.log(abc.speed);
}
}
rideVehicle({ color: "赤", weight: 1500 }); // 赤 1500
rideVehicle({ color: "青", speed: 60 }); //青 60
sum関数の引数に応じで実行結果が変わるのがわかります。
2.in演算子
in演算子での型ガードの書き方は “プロパティ” in ~ と書きます。
以下にcarとbikeの2つのオブジェクトとそれらを結合させたcarBikeがあります。carオブジェクトもbikeオブジェクトもお互いにcolorプロパティを持っていますが、weight、speedプロパティをお互いに持ち合わせていません。オブジェクトの型を比較しspeedプロパティを出力したいところですが、typeofは使用することができません。なぜなら、カスタム型のオブジェクト型はTypeScriptにしか存在しないためtypeofで比較することができないからです。このような場合in演算子を使用します。
type car = {
color: string;
weight: number;
};
type bike = {
color: string;
speed: number;
};
type carBike = car | bike;
function rideVehicle(abc: carBike) {
if ("speed" in abc) {
console.log(abc.speed);
}
}
ではrideVehicle関数のコンソールを呼び出してみます。if文の条件を少し変え出力します。
function rideVehicle(abc: carBike) {
console.log(abc.color);
if ("weight" in abc) {
console.log(abc.weight);
} else {
console.log(abc.speed);
}
}
const biker ={
color: "赤",
speed: 60,
}
rideVehicle({ color: "赤", weight: 1500 }); //赤 1500
rideVehicle({ color: "青", speed: 60 }); //青 60
今後
型ガードの種類いにはinstanceofもあるのでそちらの勉強もしていきたいと思います。