【TypeScript】型ガードと型アサーションについて知ろう 【初心者向け】

はじめに

この記事では、TypeScriptにおける「型ガード」と「型アサーション」のそれぞれの特徴と違いを備忘録として簡単にまとめました。これらはTypeScriptの型システムを理解し、安全に利用するための重要な概念です。型の不確実性を管理し、より堅牢なアプリケーションを開発しましょう。

型ガードとは

型ガードは、特定のスコープ内で変数の型を確定させる式や構文です。これにより、コンパイラはそのスコープ内での型の安全性を保証し、型エラーを防ぎます。型ガードは、typeof, instanceofなどがあります。

typeofを使用した例

typeof 変数 === 型名

const inputData = (data: string | number) => {
  if (typeof data === "string") {
    return `入力された文字列は "${data}" です。`;
  } else {
    return `入力された数値は ${data} です。`;
  }
};

console.log(inputData("Hello, World"));  // "入力された文字列は "Hello, World" です。"
console.log(inputData(12345));                 // "入力された数値は 12345 です。"

instanceofを使用した例

instanceofはオブジェクトが特定のクラスのインスタンスであるかどうかをチェックするのに使用されます。
以下はinstanceofを使用した型ガードの例です

変数名 instanceof 型名

class Bird {
  fly() {
    console.log("Flying");
  }
}

class Fish {
  swim() {
    console.log("Swimming");
  }
}

const move = (animal: Bird | Fish) => {
  if (animal instanceof Bird) {
    animal.fly();
  } else {
    animal.swim();
  }
};

const myBird = new Bird();
const myFish = new Fish();
move(myBird); // Flying
move(myFish); // Swimming

この例では、animalがBirdのインスタンスかどうかをinstanceofでチェックしています。Birdの場合はflyメソッドを呼び出し、そうでない場合（この場合Fish）はswimメソッドを呼び出します。

メリット

• 実行時に型チェックを行うことで、型安全性が向上する
• 不正な型の使用を早期に発見でき、バグの発生を防ぐことができる

デメリット

• 実行時の型チェックがパフォーマンスに影響を与える可能性がある
• 型を確認するための追加コードが必要になり、冗長になる場合がある

用途

• APIからのレスポンスやユーザー入力など、型が不確かなデータを扱う際に有効、型の不確実性がある場合など

型アサーションとは

型アサーションは、開発者がコンパイラに対して「この変数はこの型だ」と明示的に指示する手法です。この機能は、主にコンパイラが推論できない型情報を補完する場面で使用されます。型アサーションには as キーワードやアングルブラケットの記法がありますが、as がより一般的です。

変数名 as 型名

型アサーションの使用例

let someValue: any = "これは文字列です";
let strLength: number = (someValue as string).length;
console.log(strLength);  // 出力: 11

メリット

• コンパイラが推論できない型情報を開発者が補完可能
• 必要な型情報を短いコードで指定でき、可読性が向上する

デメリット

• 誤った型アサーションはランタイムエラーを引き起こす可能性がある
• 開発者の判断ミスが型エラーを引き起こすこと場合がある

用途

• 型定義がない外部ライブラリを扱う際や、動的にプロパティが追加されるオブジェクトに対して有効

おわりに

TypeScriptを使っていると、型ガードと型アサーションのどちらを使うべきか場面に応じて選択する必要があります。基本的には型ガードを使用して、型の安全性を確保するのが一般的だと考えています。
型ガードは実行時に型チェックを行い、予期せぬエラーを防ぐことができるため、多くの場合に適しています。しかし、外部からのライブラリを利用するなどして、型情報が不完全な場合やJavaScriptからの移行期には、型アサーションが非常に役立ちます。型アサーションを用いることで、コンパイラに型情報を強制的に伝え、コードをスムーズに動作させることが可能です。最終的なアプローチとしては、基本は型ガードを使用しつつも、状況に応じて型アサーションを適切に使用することができると良いと思います。