TypeScript - タイプガード：初級者向けガイド

こんにちは、将来のコードのスーパースター！? TypeScriptとタイプガードの世界へのエキサイティングな旅にあなたを案内できることを嬉しく思います。コンピュータサイエンスを多くの年間教えてきた経験から、タイプガードを理解することはTypeScriptユニバースにおけるスーパーパワーのようなものです。それでは、一緒にこのパワーを解き放ちましょう！

TypeScript - Type Guards

タイプガードとは？

具体的な内容に入る前に、まずタイプガードとは何かを理解しましょう。あなたが豪華なパーティーのセキュリティガードだと思ってください。あなたの仕事は、それぞれのゲストの招待状を確認し、正しいエリアに許可されているかどうかを確認することです。TypeScriptのタイプガードも同じような仕事をします。コードの特定のブロック内で変数の型をチェックし、絞り込む役割を果たします。

さて、今日学ぶ主要なタイプガードの3つを見てみましょう：

タイプガード	説明
typeof	変数の型をチェック
in	オブジェクトにプロパティが存在するかをチェック
instanceof	オブジェクトが特定のクラスのインスタンスであるかをチェック

'typeof' タイプガード in TypeScript

'typeof' タイプガードは、「あなたは何者ですか？」と尋ねるようなものです。変数の型をチェックするために使用されます。以下に例を示します：

function printAll(strs: string | string[] | null) {
if (typeof strs === "object") {
for (const s of strs) {
console.log(s);
}
} else if (typeof strs === "string") {
console.log(strs);
} else {
// なにもしない
}
}

この例では、typeofを使ってstrsがオブジェクト（配列を含む）か文字列であるかをチェックしています。オブジェクトの場合はループします。文字列の場合は直接表示します。

楽しい方法で覚えると、動物店で動物が犬か猫かを知りたい場合、「あなたはどんな動物ですか？」と尋ねるようなものです。这正是 typeof が TypeScript で行うことです！

'in' タイプガード in TypeScript

'in' タイプガードは、「あなたにはこの機能がありますか？」と尋ねるようなものです。オブジェクトにプロパティが存在するかをチェックします。以下に例を示します：

type Fish = { swim: () => void };
type Bird = { fly: () => void };

function move(animal: Fish | Bird) {
if ("swim" in animal) {
animal.swim();
} else {
animal.fly();
}
}

このコードでは、animalにswimプロパティがあるかをチェックしています。あれば、それを Fish と見なして swim メソッドを呼び出します。なければ、Bird と見なして fly メソッドを呼び出します。

これを思うと、「新しいペットが魚なのか鳥なのかを調べるために、フィンがあるかどうかを確認する」というようなものです。这正是 'in' タイプガードが行うことです。

'instanceof' タイプガード in TypeScript

'instanceof' タイプガードは、「あなたはこの家族の一員ですか？」と尋ねるようなものです。オブジェクトが特定のクラスのインスタンスであるかをチェックします。以下に例を示します：

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

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

function move(pet: Bird | Fish) {
if (pet instanceof Bird) {
pet.fly();
} else {
pet.swim();
}
}

let myBird = new Bird();
move(myBird); // 出力: Flying...

この例では、petがBirdクラスのインスタンスであるかをチェックしています。あれば、flyメソッドを呼び出します。なければ、Fishと見なして swim メソッドを呼び出します。

これを思うと、「家族の集まりで、某人がジョンソン家の一員かどうかを調べるために、「あなたはジョンソン家の一員ですか？」と尋ねる」というようなものです。这正是 instanceof が TypeScript で行うことです！

すべてを合わせて

これらの3つのタイプガードを全部合わせて使ってみましょう：

class Car {
drive() { console.log("Vroom!"); }
}

class Bicycle {
ride() { console.log("Pedal!"); }
}

type Vehicle = Car | Bicycle | string;

function useVehicle(vehicle: Vehicle) {
if (typeof vehicle === "string") {
console.log(`The vehicle is: ${vehicle}`);
} else if (vehicle instanceof Car) {
vehicle.drive();
} else if ("ride" in vehicle) {
vehicle.ride();
} else {
console.log("Unknown vehicle type");
}
}

useVehicle("Skateboard");  // 出力: The vehicle is: Skateboard
useVehicle(new Car());     // 出力: Vroom!
useVehicle(new Bicycle()); // 出力: Pedal!

この例では、全部の3つのタイプガードを使っています：

typeofを使って車が文字列かどうかをチェック。
instanceofを使って Car かどうかをチェック。
inを使って ride メソッドがあるかどうかをチェック（Bicycleを示す）。

これは「スーパーデテクティブとして、すべてのスキルを使って正確な車の種類を特定する」というようなものです！

結論

そして、ここまでが、TypeScriptのタイプガードの世界を旅した結果です。typeof、in、そしてinstanceofガードを探求しました。これらの強力なツールを使うことで、TypeScriptがあなたの意図をよりよく理解し、安全で予測可能なコードを書くことができます。

覚えておいてください、タイプガードを使うことは、コードと親しみやすい会話をすることのようなものです。あなたはただコードに質問をし、よりよく理解するために話をします。次回コードを書くときは、ためらわずにこれらのタイプガードを使ってください！

練習を続け、好奇心を持ち続け、すぐにプロのようにタイプガードを使えるようになるでしょう。それでは、また次回まで、ハッピーコーディング！??

Credits: Image by storyset

前のチュートリアル:

TypeScript - 交差点タイプ

次のチュートリアル:

TypeScript - タイプアサーション