TypeScriptの型ガードとは

型ガードについて勉強したのでアウトプットします。

型ガードとは
型ガードの使い方
1. 1.typeof演算子
2. 2.in演算子
今後

型ガードとは

型ガードとはその名の通り型を判断するときに使用するものです。例えばUnion型のように２つ型を持っているものに対して役に立ちます。

型ガードの使い方

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もあるのでそちらの勉強もしていきたいと思います。