TypeScriptで複雑な型（配列・オブジェクト）の型ガードを実装する

1. 型ガードとは？

1. 型ガードとは？

TypeScriptの型ガードとは、「この変数は今どの型なのか？」をプログラムが理解できるようにする仕組みです。JavaScriptではどんな型でも混在できてしまうので、意図しないエラーが起きやすいのが弱点です。

そこでTypeScriptは条件分岐と組み合わせて型を安全に扱えるようにしてくれます。とくに配列やオブジェクトなど実務でよく使われる構造では欠かせません。

2. 配列に対する型ガード

2. 配列に対する型ガード

配列が本当に配列か？数値の配列なのか？文字列の配列なのか？TypeScriptは自動判別しきれないことがあるため、型ガードが必要になります。

2-1 Array.isArrayを使う方法

JavaScript標準の関数Array.isArray()を使うと、配列かどうか確認できます。

function isStringArray(value: unknown): value is string[] {
    return Array.isArray(value) && value.every(v => typeof v === "string");
}

使い方の例です。

const data: unknown = ["東京", "大阪"];

if (isStringArray(data)) {
    console.log(data[0].toUpperCase());
}

TOKYO

every()を使って配列内のすべての要素が文字列か確認しています。初心者にもわかりやすく安全です。

3. オブジェクトの型ガード

3. オブジェクトの型ガード

オブジェクトはキーや中身の型も違うため、より厳格にチェックする必要があります。現場ではデータAPIの型チェックなどで多用されます。

3-1 in演算子を使った型ガード

in演算子を使うと「特定のプロパティが存在するか？」を確認できます。

type User = {
    name: string;
    age: number;
};

function isUser(value: unknown): value is User {
    return typeof value === "object" && value !== null
        && "name" in value && "age" in value;
}

実際に使ってみましょう。

const item: unknown = { name: "太郎", age: 20 };

if (isUser(item)) {
    console.log(`${item.name}さんの年齢は${item.age}歳です`);
}

太郎さんの年齢は20歳です

null対策でvalue !== nullと書くのがポイントです。

4. タグ付きユニオン型と型ガード

4. タグ付きユニオン型と型ガード

複雑なデータの代表例に、複数タイプをひとまとめにしたユニオン型があります。そのときの型ガードでは、判別に使う目印（タグ）を使います。

type Cat = {
    type: "cat";
    meow: () => void;
};

type Dog = {
    type: "dog";
    bark: () => void;
};

type Pet = Cat | Dog;

function isCat(pet: Pet): pet is Cat {
    return pet.type === "cat";
}

使うときは次のようにします。

const pet: Pet = { type: "dog", bark: () => console.log("ワン!") };

if (isCat(pet)) {
    pet.meow();
} else {
    pet.bark();
}

5. 型の安全性が高まると何が良い？

5. 型の安全性が高まると何が良い？

型ガードを使うことで、次のようなメリットが得られます。

• 実行時エラーを防げる
• VS Codeなどの補完が強化される
• 複雑なデータの信頼性が向上する
• 巨大プロジェクトでも安心して開発できる

TypeScriptの目的である「安全なJavaScript開発」を実現するために欠かせないスキルです。

まとめ

まとめ

型ガードを理解するとTypeScriptの安全性が一段階上がる

今回の記事では、TypeScriptで配列やオブジェクトといった複雑なデータ構造を安全に扱うための型ガードについて詳しく学びました。JavaScriptでは、どんな型の値でも自由に扱える反面、実行して初めてエラーに気づくケースが多くあります。その弱点を補うのが、TypeScriptの型システムであり、その中でも重要な役割を果たすのが型ガードです。

型ガードとは、「この値は今どの型なのか」をプログラムの中で明確にし、TypeScriptに正しい型情報を伝えるための仕組みです。単にエラーを防ぐだけでなく、コードの意味をはっきりさせ、他の人が読んでも理解しやすい構造を作ることにもつながります。特に、API通信や外部データを扱う場面では、型ガードの有無がプログラムの信頼性を大きく左右します。

配列に対する型ガードの重要性

配列は一見シンプルに見えますが、「本当に配列なのか」「中身はどんな型なのか」という点を確認しないと、思わぬエラーの原因になります。今回紹介したArray.isArrayとeveryを組み合わせた方法は、配列かどうかだけでなく、配列の中身まで安全にチェックできる実践的な型ガードです。

例えば、文字列配列だと思って処理していたデータに数値やオブジェクトが混ざっていた場合、実行時エラーにつながります。しかし型ガードを用意しておけば、そのようなデータを事前に弾くことができ、安心して処理を続けられます。これは実務でも非常によく使われる考え方です。

オブジェクトの型ガードは「信頼できるデータか」を見極める

オブジェクトの型ガードでは、typeofやin演算子を使って「必要なプロパティが存在するか」を確認しました。オブジェクトは構造が複雑になりやすく、プロパティの不足や型の不一致がバグの原因になりがちです。そのため、unknown型やany型のデータを扱う際には、必ず型ガードを通す習慣を身につけることが大切です。

特に、null対策としてvalue !== nullを忘れずに書く点は、初心者がつまずきやすいポイントです。この一文があるだけで、TypeScriptは「安全なオブジェクト」と判断できるようになり、その後の処理が格段に書きやすくなります。

タグ付きユニオン型と型ガードの相性

タグ付きユニオン型は、複数のオブジェクト型を安全にまとめて扱うための強力な仕組みです。今回の例では、typeという共通プロパティを使って、CatとDogを判別しました。このような「判別用の目印」を持たせる設計は、TypeScriptと非常に相性が良く、switch文やif文での分岐も直感的になります。

型ガード関数を用意しておけば、「この分岐の中では確実にこの型」とTypeScriptが理解してくれるため、補完機能も最大限に活用できます。結果として、コードの安全性と開発効率の両方が向上します。

サンプルで振り返る複雑な型ガード

function isNumberArray(value: unknown): value is number[] {
    return Array.isArray(value) && value.every(v => typeof v === "number");
}

const sample: unknown = [1, 2, 3];

if (isNumberArray(sample)) {
    console.log(sample.reduce((a, b) => a + b, 0));
}

この例では、配列であることと、要素がすべて数値であることを同時にチェックしています。型ガードが通った後は、reduceなどの数値専用メソッドを安心して使える点が大きなメリットです。このような小さな積み重ねが、堅牢なTypeScriptコードにつながります。

型ガードを使いこなすことが成長への近道

型ガードは、TypeScript初心者にとっては少し難しく感じるかもしれません。しかし、一度理解してしまえば、「なぜこのエラーが出るのか」「どこでチェックすべきか」が自然と見えるようになります。型ガードを正しく使うことは、安全なプログラムを書くための基礎体力のようなものです。

配列、オブジェクト、ユニオン型といった複雑な型を扱う場面ほど、型ガードの価値は高まります。ぜひ日々のコードの中で積極的に取り入れ、TypeScriptの強みを最大限に活かしていきましょう。