【TypeScript】オプショナルチェーンを使おう - そらたのファンジニアブログ

オプショナルチェーン(?.)を使用すれば、簡潔にコードを記載することができます。

この記事ではオプショナルチェーンの使用方法やメリット、注意点などを記載します。

環境
オプショナルチェーンとは
実際の使用例
1. サンプルコード
2. メリット
注意点
1. 左辺には適用できない
まとめ

環境

typescript: 4.2.4

オプショナルチェーンとは

オブジェクトのプロパティにアクセスする際、そのプロパティが存在しない場合でもエラーが発生せずに安全に処理を続けることができます。

通常は存在しないプロパティにアクセスした場合にエラーが発生します。
しかし、オプショナルチェーンを使うことで存在しないプロパティにアクセスしてもエラーが発生せず、undefinedが返されるようになります。

参考: オプショナルチェーン

実際の使用例

サンプルコード

以下が、オプショナルチェーンを使ったサンプルコードです。

interface IName {
  firstName: string;
  lastName: string;
}

const userNameObj: { [key: string]: IName } = {
  userA: { firstName: 'taro', lastName: 'yamada' },
};

const aFirstName = userNameObj.userA?.firstName;
const bFirstName = userNameObj.userB?.firstName;

console.log(aFirstName); // taro
console.log(bFirstName); // undefined

aFirstNameは存在するプロパティにアクセスし値が取得できています。
それに対して、bFirstNameは存在しないプロパティにアクセスしているものの、エラーにはならずundefinedが返されていることが分かります。

メリット

コードを短縮することが可能です。
オプショナルチェーンを使用しない場合の書き方が、以下になります。

const aFirstName = userNameObj.userA && userNameObj.userA.firstName;
const bFirstName = userNameObj.userB && userNameObj.userB.firstName;

オプショナルチェーンを使用しない場合、firstNameにアクセスする前にその上位のプロパティであるuserA,userBの存在を確認する必要があります。

オプショナルチェーンを使用すると、簡潔に記載できることが分かったかと思います。

注意点

左辺には適用できない

値を代入する際の左辺でオプショナルチェーンを使用することはできません。

interface IName {
  firstName: string;
  lastName: string;
}

const userNameObj: { [key: string]: IName } = {
  userA: { firstName: 'taro', lastName: 'yamada' },
};

userNameObj.userB?.firstName = 'takashi'; // The left-hand side of an assignment expression may not be an optional property access.