TypeScriptのハテナマークとオプショナルチェーンの使い方

2023.08.05 に更新記事は 3 分で読めます
サムネイル画像

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

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

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

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

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

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

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

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

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

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

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

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

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

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のハテナマーク(?)とオプショナルチェーンの基本的な使い方です!

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

プロフィールアイコン

Syuu

フロントエンドが好きなWEBエンジニア Next.js / React / TypeScript

SHARE