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.x が undefined または 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
