Gizanbeak

この記事ではTypeScriptの「ハテナマーク（?）」や「オプショナルチェーン」について具体的なコード例と共に解説します。

TypeScriptで ? は主に2種類の意味合いで使用されます。
型定義時に使用される ? とオブジェクトのプロパティを取得する時に使用される「オプショナルチェーン」です。

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

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

gizanbeak.com

ハテナマーク: フレキシブルな型定義

まずは、ハテナマーク「?」について紹介します。

この記号はTypeScriptの機能で「optional」つまり「任意」を示すもので、例えば以下のように使用することができます。

interface Person {
  name: string;
  age?: number;
}

このコードでは Person 型のオブジェクトは name プロパティを必ず持ちますが、age プロパティは任意です。

これは age プロパティがない Person オブジェクトを作成してもエラーにならないことを意味しています。

let bob: Person = {
  name: "John"
};

こういう風にハテナマークは「必要ない場合でもこのプロパティを持つことができる」ことを示しているわけですね。

TypeScriptを使う上で理解しておきたい便利な3つの機能

TypeScriptの強力な型推論とジェネリック機能をコード例と共に詳しく解説します。基本から応用まで理解を深めましょう。

gizanbeak.com

オプショナルチェーン: 安全に深いプロパティを取得

次にオプショナルチェーンについて説明します。

オプショナルチェーンは ? 演算子を用いて オブジェクトの深い部分のプロパティを安全に取得 するための仕組みです。

let person: Person = {
  name: "Alice",
  address: {
    street: "32番地",
    city: "横浜"
  }
};

console.log(person.address?.street); // "32番地"

person.address?.street のように書くと address プロパティが存在すればそのstreet プロパティを、存在しなければ undefined を返します。

これは person.address && person.address.street と書くのと同じ意味になりますがよりシンプルに書くことができます。

以下のような street が存在しない場合は undefined になるということですね。

let person: Person = {
  name: "Alice",
};

console.log(person.address?.street); // undefined

このオプショナルチェーンは他に関数やメソッドの呼び出しにも使用できます。

let person: Person = {
  name: "Alice",
  sayHello: () => "こんにちは！"
};

console.log(person.sayHello?.()); // "こんにちは！"

上記のコード例では sayHello メソッドが存在すればそれを呼び出し、存在しなければundefined を返しています。

以上が、TypeScriptのハテナマーク（?）とオプショナルチェーンの基本的な使い方です！

これらの機能は日常的なコーディングで非常に便利でよく使用されるため覚えておいて損はないです。
ぜひ試してみてください！