TypeScriptのOptionalChaining

2020-08-13TypeScript


TypeScript3.7からOptional Chainingが使えるようになっていた

Rubyでいうボッチ演算子

?.を挟むことでnullundefinedの可能性があっても毎度チェックせずともよしなにやってくれる

関数呼び出しも同様に書くことができ次のようなパターンで記述可能

  • hoge?.fuga
  • hoge?.[0]
  • hoge?.(args)

ネストの深いJSONなどで存在チェックをする際に楽に書けるようになる

GAのAPIレスポンスの特定のレコードを取得する

-    if (response && response.data && response.data.reports && response.data.reports[0] && response.data.reports[0].data && response.data.reports[0].data.rows) {
+    if (response?.data?.reports?.[0]?.data?.rows) {
       return response.data.reports[0].data.rows;
     }
     else {
       return [];
     }

Null合体演算子と組み合わせると次のように書くことができ、さらにスッキリする

  • 左辺がnullやundefinedの場合はから配列を返す
return response?.data?.reports?.[0]?.data?.rows ?? [];

参考

Optional chaining - JavaScript | MDN