こんにちは。KOUKIです。
JavaScriptの型チェックについて、以前記事にしました。
本記事では、TypeScriptの型チェックについて記事にします。
学習まとめ
環境構築
以下の記事で作成したプロジェクトを使います。
※TypeScriptが動けば問題ありません
Union型をチェックする
以下のようなインターフェースがあるとします
|
1 2 3 4 5 6 7 8 9 10 |
interface Bird { flyingSpeed: number; } interface Horse { runningSpeed: number; } // Union型 type Animal = Bird | Horse |
Union型として作成したAnimalにアクセスする関数を作りたいとします。
|
1 2 3 |
function actionAnimal(animal: Animal) { console.log(animal.flyingSpeed); } |
しかし、これはエラーになります。
引数として渡したオブジェクトにflyingSpeedが存在するかTypeScriptが判断できないためです。
このような場合は、JavaScriptの型チェックでも学んだ「in」演算子などを使います。※タイプガードと言うようです
|
1 2 3 4 5 |
function actionAnimal(animal: Animal) { if ("flyingSpeed" in animal) { console.log(animal.flyingSpeed); } } |
これでエラーは消えますが、プロパティやメソッドが増えるごとに分岐処理を追加しなくてはならないため、不便ではあります。
また、タイプミスなども怖いですね。
そのような場合は、以下のようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
interface Bird { race: "bird"; // 共通のプロパティを定義 flyingSpeed: number; } interface Horse { race: "horse"; // 共通のプロパティを定義 runningSpeed: number; } // Union型 type Animal = Bird | Horse; function actionAnimal(animal: Animal) { let speed; // switch文で判別 switch (animal.race) { case "bird": speed = animal.flyingSpeed; break; case "horse": speed = animal.runningSpeed; break; } console.log("Running Speed: " + speed); } actionAnimal({ race: "horse", runningSpeed: 10 }); // => Running Speed: 10 |
interfaceに共通のプロパティを定義し、呼び出し元の関数にswitch文で分岐処理を書いてあげればOKです。
interfaceは実装先のクラスにプロパティやメソッドを強制するので、「判定したいものが実装されていない」という事を防いでくれます。
おわりに
TypeScriptの型チェックも慣れるまでは大変だと思います。
しかし、型チェックを使いこなせれば、堅牢性の高いシステムを組み上げることができると思いますので、よければ参考にしてください。
私も引き続き、勉強します^^
それでは、また！
にほんブログ村
最近のコメント