Zenn
🙆

Typescript(型ガードを深める）

2023/03/05に公開
TypeScript
tech

Typescriptの型ガードとは何?

Typescriptは静的型付け言語であり、コンパイル時に型エラーを検出することができます。しかし、TypescriptはJavaScriptと同様に、動的なプログラミングもサポートしています。そのため、実行時に型エラーが発生することがあります。

この問題を解決するために、Typescriptには型ガードがあります。型ガードを使用することで、変数の型をチェックし、実行時の型エラーを回避することができます。

型ガードの種類

Typescriptには、いくつかの型ガードがあります。

typeof型ガード

typeof型ガードを使用することで、変数の型をチェックすることができます。

function add(a: number | string, b: number | string): number | string {
  if (typeof a === "number" && typeof b === "number") {
    return a + b;
  } else {
    return `${a}${b}`;
  }
}

add(1, 2); // 3
add("Hello", "World"); // "HelloWorld"

この例では、aとbの型をチェックしています。aとbが両方ともnumber型の場合は、aとbを足して数値を返します。aとbのどちらかが文字列型の場合は、aとbを連結して文字列を返します。

instanceof型ガード

instanceof型ガードを使用することで、オブジェクトの型をチェックすることができます。

class Dog {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Cat {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

function isDog(pet: Dog | Cat): pet is Dog {
  return (pet as Dog).name !== undefined;
}

let dog = new Dog("Pochi");
let cat = new Cat("Tama");

if (isDog(dog)) {
  console.log(`${dog.name} is a dog`);
} else {
  console.log(`${dog.name} is not a dog`);
}

if (isDog(cat)) {
  console.log(`${cat.name} is a dog`);
} else {
  console.log(`${cat.name} is not a dog`);
}

この例では、DogクラスとCatクラスがあります。isDog関数を使用して、渡されたオブジェクトがDogクラスのインスタンスであるかどうかを判定しています。

in型ガード

in型ガードを使用することで、オブジェクトが特定のプロパティを持っているかどうかをチェックすることができます。

interface Square {
  width: number;
  height: number;
}

interface Rectangle {
width: number;
height: number;
color: string;
}

function isSquare(shape: Square | Rectangle): shape is Square {
return "height" in shape;
}

let square: Square = { width: 10, height: 10 };
let rectangle: Rectangle = { width: 10, height: 20, color: "red" };

if (isSquare(square)) {
console.log("square");
} else {
console.log("rectangle");
}

if (isSquare(rectangle)) {
console.log("square");
} else {
console.log("rectangle");
}

この例では、SquareインターフェースとRectangleインターフェースがあります。isSquare関数を使用して、渡されたオブジェクトがSquareインターフェースを実装しているかどうかを判定しています。

型ガードの使い方

型ガードを使用するためには、関数の戻り値に pet is Dog のように型アサーションを付ける必要があります。このようにすることで、TypeScriptはこの関数が型ガードであることを認識し、適切に型チェックを行います。

また、型ガードはif文の条件式やswitch文のcase文の中で使用することができます。

まとめ

Typescriptの型ガードを使用することで、実行時の型エラーを回避することができます。typeof型ガード、instanceof型ガード、in型ガードなど、いくつかの型ガードがあります。型ガードを使用する際には、関数の戻り値に型アサーションを付ける必要があります。
また、型ガードを使用することで、条件分岐をより簡潔に記述することができます。型ガードを使用しない場合、オブジェクトのプロパティにアクセスする際に毎回型チェックを行う必要がありますが、型ガードを使用することでこの手間を省くことができます。

ただし、型ガードを過剰に使用することは可読性を損なうことがあります。適切な場面で使用することで、コードの読みやすさを保ちつつ、実行時のエラーを回避することができます。

以上が、TypeScriptの型ガードについての解説です。型ガードを使用することで、より堅牢なコードを記述することができます。また、TypeScriptの型システムの力を最大限に引き出すことができるため、効率的な開発ができます。

Discussion