型の絞り込み：typeof・instanceof・判別可能なユニオン
型ガードを使い、typeof、instanceof、判別可能なユニオンのパターンで実行時にユニオン型を絞り込みます。
「型の絞り込み：typeof・instanceof・判別可能なユニオン」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
型の絞り込みとは
TypeScriptは、最初は広い型（たとえば string | number）から処理を始めます。型の絞り込みとは、条件ブロック内で型をより具体的なものへと絞り込む処理です。TypeScriptは型の絞り込みを自動的に追跡します。
typeofによる型の絞り込み
typeof演算子はプリミティブ型を絞り込みます。ifブロック内では、TypeScriptは正確な型を把握できます。
function format(value: string | number | boolean): string {
if (typeof value === 'string') {
return value.toUpperCase(); // string here
}
if (typeof value === 'number') {
return value.toFixed(2); // number here
}
return String(value); // boolean here
}instanceofによる型の絞り込み
instanceofはクラスのインスタンスを絞り込みます。ブロック内では、TypeScriptは具体的なクラスを把握できます。
function processError(err: unknown) {
if (err instanceof Error) {
console.error(err.message); // Error methods available
} else if (err instanceof Response) {
console.error('HTTP error:', err.status);
} else {
console.error('Unknown:', err);
}
}真偽値による型の絞り込み
TypeScriptは、真と判定されるチェックによって null と undefined を型から除外します。
function printLength(value: string | null | undefined) {
if (value) {
console.log(value.length); // string here (null/undefined filtered)
}
}等価性による型の絞り込み
厳密等価比較によって、型はリテラル型まで絞り込まれます。判別可能なユニオンや文字列 enum に便利です。
function handle(action: 'submit' | 'cancel' | 'reset') {
if (action === 'submit') {
// action is exactly 'submit'
doSubmit();
}
}in演算子による型の絞り込み
in演算子は、どのプロパティが存在するかを確認して、オブジェクトのユニオン型を絞り込みます。
interface Cat { meow(): void; }
interface Dog { bark(): void; }
function speak(animal: Cat | Dog) {
if ('meow' in animal) {
animal.meow(); // Cat
} else {
animal.bark(); // Dog
}
}判別可能なユニオン — タグによる型の絞り込み
判別可能なユニオンには、共通するリテラル型のプロパティ（判別子（discriminant））があります。TypeScriptは、そのプロパティに基づいてswitch/if内のユニオンを絞り込みます。
type LoadingState = { status: 'loading' };
type SuccessState = { status: 'success'; data: User[] };
type ErrorState = { status: 'error'; message: string };
type State = LoadingState | SuccessState | ErrorState;
function render(state: State) {
switch (state.status) {
case 'loading': return '<Spinner />';
case 'success': return renderUsers(state.data); // state.data available
case 'error': return renderError(state.message);
}
}型述語 — カスタム型ガード
型述語関数は、呼び出し元で型を絞り込みます。戻り値の型には param is Type を使用します。
function isUser(value: unknown): value is User {
return (
typeof value === 'object' &&
value !== null &&
'name' in value &&
typeof (value as User).name === 'string'
);
}
const data: unknown = await fetchJson('/api/me');
if (isUser(data)) {
console.log(data.name); // typed as User
}アサーション関数
アサーション関数は、条件が満たされない場合に例外をスローし、呼び出し後の型を絞り込みます。
function assertIsString(val: unknown): asserts val is string {
if (typeof val !== 'string') throw new Error('Expected string');
}
const val: unknown = getInput();
assertIsString(val);
console.log(val.toUpperCase()); // val is string here網羅性チェック
判別可能なユニオンに対するswitchで、defaultブランチにnever型が残る場合、TypeScriptはすべてのケースが処理されていることを保証します。新しいバリアントが追加されたときにコンパイルエラーにするには、never型の変数に代入するdefaultを追加します。
function render(state: State): string {
switch (state.status) {
case 'loading': return '...';
case 'success': return state.data.length.toString();
case 'error': return state.message;
default:
const _exhaustive: never = state;
throw new Error('Unhandled state: ' + _exhaustive);
}
}Array.isArrayによる型の絞り込み
Array.isArray()は、値を配列型に絞り込みます。
function processInput(input: string | string[]) {
if (Array.isArray(input)) {
return input.join(', '); // string[]
}
return input.toUpperCase(); // string
}クイックチェック
ユニオン型のバリアントを区別するために、共通するリテラル型のプロパティを使う型の絞り込み手法はどれですか。
復習：TypeScriptの型の絞り込み
プリミティブ型には typeof、クラスには instanceof、オブジェクトの形状には in演算子を使います。真偽値による絞り込みでは null/undefined を除外できます。共通するリテラル型のプロパティを持つ判別可能なユニオンを使うと、網羅的なswitch文を記述できます。複雑な実行時チェックには、カスタム型述語（is）を使います。default内でneverを使うと、網羅性をチェックできます。
よくある質問
「型の絞り込み：typeof・instanceof・判別可能なユニオン」レッスンは無料ですか？
はい。「型の絞り込み：typeof・instanceof・判別可能なユニオン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「型の絞り込み：typeof・instanceof・判別可能なユニオン」で何を学びますか？
型ガードを使い、typeof、instanceof、判別可能なユニオンのパターンで実行時にユニオン型を絞り込みます。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「型の絞り込み：typeof・instanceof・判別可能なユニオン」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ジェネリクス：T extends と制約
- ユーティリティ型：Partial・Required・Pick・Omit
- Mapped Types と Conditional Types
- 型の絞り込み：typeof・instanceof・判別可能なユニオン