【TypeScript】【Type Guard】について

はじめに

この記事は【Type Guard】についての備忘録である。

【Type Guard】についてとは

• 条件ブロック内のオブジェクトの型を制限することができる
• 【Type Guard】は3つの演算子が存在する

1. typeof演算子

typeof演算子

• typeof 演算子は、typeof 式 のような形で式を評価し、その評価結果に応じて以下表「結果」のような文字列を返す
• ユニオン型に対して、型のチェックを行い、処理の分岐が可能
• JavaScriptの世界の型定義しか扱えない
• 式がnullの場合に、”object"を返すというイレギュラーな動きをする

// サンプルコード 
function numberToStirng(value: string | number) {
  if (typeof value === "number") {
    return value.toString();
  }
  return value;
}

2. instanceof演算子

instanceof演算子

• 特定のクラスのインスタンスかどうかをチェックして処理の分岐が可能

// サンプルコード
function getMonth(date: string | Date) {
  if (date instanceof Date) {
    console.log(date.getMonth() + 1);
  }
}

3. in演算子

in演算子

• 値 in オブジェクトのような形で、値が、オブジェクトのプロパティかどうかを判定し、その真偽値を返す

// サンプルコード
type Dog = {
  bow: () => void;
};
type Cat = {
  myao: () => void;
};
const dog: Dog = {
  bow: () => console.log("bow")
};
const cat: Cat = {
  myao: () => console.log("myao")
};
const pet = (pet: Dog | Cat) => {
  if ("bow" in pet) {
    dog.bow();
  } else {
    cat.myao();
  }
};