高度な型の絞り込み
高度な型ガードと制御フロー解析を使って、複雑な型の条件を簡単に扱う方法を学びます。
「高度な型の絞り込み」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全3レッスンが含まれています。
高度な型の絞り込みの概要
高度な型の絞り込みの概要
高度な型の絞り込みを使うと、型ガード、制御フロー分析、カスタム型述語などの高度なテクニックによって、実行時に複雑な型をより具体的な型へ絞り込めます。
これらのツールにより、TypeScriptコードの安全性と予測可能性が高まります。
型の絞り込みとは
型の絞り込みとは
型の絞り込みとは、実行時チェックを使って、より広い型（例：string | number）をより具体的な型へ絞り込むことです。
型の絞り込みに<code>typeof</code>を使用する
typeofを使った型の絞り込み
typeof演算子を使うと、プリミティブ型を絞り込めます。
function printValue(value: string | number): void {
if (typeof value === 'string') {
console.log(`String: ${value}`);
} else {
console.log(`Number: ${value}`);
}
}
printValue('Hello'); // String: Hello
printValue(42); // Number: 42型の絞り込みに<code>instanceof</code>を使用する
instanceofを使った型の絞り込み
instanceof演算子を使うと、クラスのインスタンスを絞り込めます。
class Dog {
bark() {
console.log('Woof!');
}
}
class Cat {
meow() {
console.log('Meow!');
}
}
function makeSound(animal: Dog | Cat): void {
if (animal instanceof Dog) {
animal.bark();
} else {
animal.meow();
}
}
makeSound(new Dog()); // Woof!
makeSound(new Cat()); // Meow!カスタム型ガードの使用
カスタム型ガードの使用
カスタム型ガード関数を作成すると、型をより正確に絞り込めます。
type Fish = { swim: () => void };
type Bird = { fly: () => void };
declare const animal: Fish | Bird;
function isFish(animal: Fish | Bird): animal is Fish {
return (animal as Fish).swim !== undefined;
}
if (isFish(animal)) {
animal.swim();
} else {
animal.fly();制御フロー分析
制御フロー分析
TypeScriptの制御フロー分析では、コードの論理的な流れに基づいて型が自動的に絞り込まれます。
function getLength(value: string | string[]): number {
if (Array.isArray(value)) {
return value.length;
} else {
return value.length;
}
}
console.log(getLength('Hello')); // 5
console.log(getLength(['a', 'b', 'c'])); // 3高度な型の絞り込みのメリット
高度な型の絞り込みのメリット
高度な型の絞り込みにより、コードを次のように改善できます。
- 実行時エラーを減らせます。
- コードがより安全になり、理解しやすくなります。
- 型の扱いを正確に制御できます。
練習課題
練習課題
string | number型のパラメーターを受け取り、型ごとに異なるメッセージをログ出力する関数を作成してください。typeofを使ってロジックを実装しましょう。
おめでとうございます！
おめでとうございます！
TypeScriptで高度な型の絞り込みテクニックを使い、複雑な型を安全かつ効果的に絞り込んで扱う方法を学びました。これらのテクニックを練習して、コードの堅牢性と型安全性を高めましょう。
よくある質問
「高度な型の絞り込み」レッスンは無料ですか？
はい。「高度な型の絞り込み」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。
「高度な型の絞り込み」で何を学びますか？
高度な型ガードと制御フロー解析を使って、複雑な型の条件を簡単に扱う方法を学びます。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。
「高度な型の絞り込み」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。