型ガード
型ガードを使ってunknown型やany型を安全に扱います
「型ガード」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
型ガード入門
型ガード
次のレッスンへようこそ！このレッスンでは、実行時に型を絞り込めるTypeScriptの強力な機能、型ガードについて学びます。型ガードを使うと、コードの型安全性を確保し、エラーを防げます。さっそく始めましょう！
型ガードとは
型ガードとは
型ガードとは、実行時に変数の型を判定する関数または構文です。特定のコードブロック内で、TypeScriptが変数の型を絞り込めるようにします。
例:
課題: 型ガードを使用して、値が数値かどうかを確認する関数を作成してください。
function isString(value: unknown): boolean {
return typeof value === "string";
}
function printLength(value: unknown): void {
if (isString(value)) {
console.log(value.length);
// TypeScript knows 'value' is a string here
} else {
console.log("Value is not a string");
}
}
printLength("Hello");
// Output: 5
printLength(42);
// Output: Value is not a string
プリミティブ型での typeof の使用
プリミティブ型での typeof の使用
typeof演算子を使用すると、文字列、数値、真偽値などのプリミティブ値の型を確認できます。
例:
課題: 関数内で文字列と数値を区別するためにtypeofを使用してください。
function printValue(value: string | number): void {
if (typeof value === "string") {
console.log(`String value: ${value}`);
} else {
console.log(`Number value: ${value}`);
}
}
printValue("Hello");
// Output: String value: Hello
printValue(42);
// Output: Number value: 42
クラスでの instanceof の使用
クラスでの instanceof の使用
instanceof演算子は、オブジェクトが特定のクラスのインスタンスかどうかを確認します。例:
課題: 関数内で異なるクラスのインスタンスを処理するためにinstanceofを使用してください。
class Dog {
bark(): void {
console.log("Woof!");
}
}
class Cat {
meow(): void {
console.log("Meow!");
}
}
function makeSound(animal: Dog | Cat): void {
if (animal instanceof Dog) {
animal.bark();
} else {
animal.meow();
}
}
let dog = new Dog();
let cat = new Cat();
makeSound(dog);
// Output: Woof!
makeSound(cat);
// Output: Meow!
カスタム型ガードの使用
カスタム型ガードの使用
value is Typeという戻り値の型を使用して、カスタム型ガード関数を作成できます。例:
interface Car {
make: string;
model: string;
}
interface Bike {
brand: string;
type: string;
}
function isCar(vehicle: Car | Bike): vehicle is Car {
return (vehicle as Car).make !== undefined;
}
function printVehicle(vehicle: Car | Bike): void {
if (isCar(vehicle)) {
console.log(`Car: ${vehicle.make} ${vehicle.model}`);
} else {
console.log(`Bike: ${vehicle.brand} ${vehicle.type}`);
}
}
let car: Car = { make: "Toyota", model: "Corolla" };
let bike: Bike = { brand: "Yamaha", type: "Sport" };
printVehicle(car);
// Output: Car: Toyota Corolla
printVehicle(bike);
// Output: Bike: Yamaha Sport
判別可能なユニオン型
判別可能なユニオン型
判別可能なユニオン型では、共通のプロパティを使用して型を区別します。例:
interface Circle {
kind: "circle";
radius: number;
}
interface Rectangle {
kind: "rectangle";
width: number;
height: number;
}
type Shape = Circle | Rectangle;
function calculateArea(shape: Shape): number {
if (shape.kind === "circle") {
return Math.PI * shape.radius ** 2;
} else {
return shape.width * shape.height;
}
}
let circle: Circle = { kind: "circle", radius: 5 };
let rectangle: Rectangle = { kind: "rectangle", width: 10, height: 20 };
console.log(calculateArea(circle));
// Output: 78.53981633974483
console.log(calculateArea(rectangle));
// Output: 200
網羅性チェック
網羅性チェック
網羅性チェックにより、判別可能なユニオン型で考えられるすべてのケースが処理されていることを確認できます。例:
function getShapeInfo(shape: Shape): string {
switch (shape.kind) {
case "circle":
return `Circle with radius ${shape.radius}`;
case "rectangle":
return `Rectangle with dimensions ${shape.width}x${shape.height}`;
default:
// This line ensures all cases are handled
const _exhaustiveCheck: never = shape;
return _exhaustiveCheck;
}
}
よくある間違い
よくある間違い
型ガードを使用する際によくある間違いを紹介します:
- ユニオン型のすべてのケースを含め忘れる。
- 条件分岐のすべての分岐で型ガードを使用しない。
- 適切な確認をせずに
asを使って型をキャストする。
ヒント: 特定のプロパティやメソッドにアクセスする前に、必ず型ガードを使用して型を絞り込んでください！
すばらしい出来です
すばらしい出来です
おめでとうございます！TypeScriptで型ガードを使用して実行時に型を絞り込み、型安全性を確保する方法を学びました。型ガードは、複雑なユニオン型を扱い、堅牢でエラーのないコードを作成するために欠かせません。次のレッスンでは、高度なマップ型について学びます。引き続きコーディングしていきましょう！
よくある質問
「型ガード」レッスンは無料ですか？
はい。「型ガード」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「型ガード」で何を学びますか？
型ガードを使ってunknown型やany型を安全に扱います ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「型ガード」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。