TypeScriptのオブジェクトとプロパティの存在チェック完全ガイド

オブジェクトの存在チェックはバグの原因となることが多いので、しっかりと理解しておきたいテーマの一つですね。

この記事ではTypeScriptでのオブジェクトとプロパティの存在チェックの方法を具体的に紹介します。

オブジェクトの存在チェック：未定義オブジェクトの判定

まずは、オブジェクトそのものが存在しているか、未定義なのかを判定する方法をいくつか紹介します。
以下の順で詳しく説明していきます。

undefinedと比較する方法
typeof 演算子を使う方法
void 演算子を使う方法
==null を使う方法

`undefined`と比較する方法

最も基本的な方法ですね。
以下のように、オブジェクトが undefined かどうか直接比較します。

const obj: any = getSomeObject()
if (obj === undefined) {
    console.log('obj は undefined　です!')
}

このコードでは getSomeObject() で取得した obj が undefined かどうかを直接比較しています。

シンプルですが 変数が宣言されていない場合エラーが出る点に注意 が必要です。

`typeof` 演算子を使う方法

typeof は変数の型を文字列として取得することができる演算子ですね。
以下のように使用可能です。

const obj: any = getSomeObject()
if (typeof obj === "undefined") {
    console.log('obj は undefined　です!')
}

この方法の良い点は、変数がまだ宣言されていない場合でもエラーにならない ことです。

安全に存在チェックが行えるので、オススメの方法の一つです。

TypeScriptの型安全を高める魔法 keyof と typeof の使い方

TypeScriptのkeyofとtypeofを使いこなす方法を具体的なコード例で解説します。

gizanbeak.com

`void` 演算子を使う方法

少し変わった方法ですが void 演算子を使うことで undefined を明示的に生成できます。
以下のように記述します。

const obj: any = getSomeObject()
if (obj === void 0) {
    console.log('obj は undefined　です!')
}

この方法はあまりポピュラーではないですが、知っておくと時々役立ちます。

`==null` を使う方法

==null を使うと null か undefined のどちらかを以下のようにチェックできますね。

const obj: any = getSomeObject()
if (obj == null) {
    console.log('obj は null か undefined　です!')
}

この方法は手軽ですが null と undefined の両方をチェックしてしまうので、状況に応じて適切に選択する必要があります。

未定義オブジェクトの判定のまとめ

ここまで、オブジェクトが未定義かどうかを判定する方法をいくつ紹介しました。

個人的には、変数の存在チェックには typeof が安全でオススメです。

オブジェクト存在チェック：プロパティの存在チェック

ここまでオブジェクトが未定義かどうかを確認する方法を紹介しました！
そのオブジェクトに特定のプロパティが存在しているかどうかも重要ですよね。

次はその方法を紹介していきます！

typeof 演算子を使う方法
in 演算子を使う方法
hasOwnProperty メソッドを使う方法

`typeof` 演算子を使う方法

typeof を使ってプロパティが undefined でないことを確認することもできます。

const obj: { prop?: string } = getSomeObject()
if (typeof obj.prop !== "undefined") {
    console.log('prop は存在しています！')
}

ここでは obj に prop というプロパティが存在しているかをチェックしています。
存在していれば「prop は存在しています！」というメッセージを表示しています。

`in` 演算子を使う方法

in 演算子を使うオブジェクトが指定したプロパティを持っているかどうかを確認することができます。
この方法はプロパティの存在を手軽に調べたい場合に大変役立ちますね！

const obj: { prop?: string } = getSomeObject()
if ("prop" in obj) {
    console.log('prop は存在しています！')
}

このコードの if ("prop" in obj) は obj が prop という名前のプロパティを持っているかどうかを確認します。
この場合 prop が存在すればコンソールにメッセージが表示されます。

ただし、使用する際の注意点があります。
in 演算子は オブジェクトのプロトタイプチェーン上のプロパティもチェック してしまいます。

これは何を意味するのかと言うと、オブジェクトが直接持っていないプロパティでも、それがオブジェクトのプロトタイプに存在する場合 in 演算子は true を返します。

例えば、Arrayのインスタンスが length プロパティを持っているかどうかを確認する場合、それはArrayのプロトタイプに存在するので true が返ります。

`hasOwnProperty` メソッドを使う方法

オブジェクト自体がそのプロパティを持っているかだけを確認するには hasOwnProperty を使用します。

const obj: { prop?: string } = getSomeObject()
if (obj.hasOwnProperty("prop")) {
    console.log('prop は存在しています！')
}

この方法は 継承したプロパティはチェックされない ので、直接そのオブジェクトにプロパティが存在するかを確認したい場合に便利です。

継承元のプロパティを判定

in 演算子はオブジェクトが継承したプロパティもチェックしますが、hasOwnProperty ではチェックされません。
この違いを理解して適切に方法を選ぶことが大切ですね！

締めくくりに、TypeScriptでの存在チェックは多くの方法がありますが、それぞれの方法には特性と用途があります。

コードの堅牢性を高めるためにも適切な方法を選んで利用することを心がけましょう！

【完全ガイド】TypeScriptオブジェクト型の理解と活用法

TypeScriptのオブジェクト型を活用しませんか？基本から応用まで詳しく解説します。プログラミングがさらに楽しくなること間違いなし！

gizanbeak.com

Gizanbeak