Optional chainingとNull合体演算子

TypeScript 3.7で利用できるようになった「Optional chaining」と「Null合体演算子(Nullish Coalescing)」について確認します。
「null」「undefined 」を扱う処理をよりスマートに書くことができるようになります。

Optional chaining
( x.y?.z )

下記処理を実行すると Cannot read property 'y' of undefined というエラーが発生します。

const outputA = (obj: any) => {
  console.log(obj.x.y);
};

const obj = { a: 'xxx' };

outputA(obj);

これまでは console.log(obj.x && obj.x.y); といった形で obj.xundefined または null であるか判定しておく必要がありました。

Optional chaining を利用すると obj.x?.y といった形式で書けるようになります。

const outputA = (obj: any) => {
  console.log(obj.x?.y); // undefined
};

const obj = { a: 'xxx' };

outputA(obj);

Null合体演算子(Nullish Coalescing)
(x ?? y)

以下のように、左辺が null undefined の場合、右辺の値を返します。

console.log(null ?? 'default'); // default
console.log(undefined ?? 'default'); // default

左辺が null undefined 以外であれば、左辺の値を返します。

console.log(1 ?? 'default string'); // 1
console.log('hello world' ?? 'default string'); // hello world

参考