||と??の使い分けについて解説します。これらは演算子で、どちらも下のように使えます。
const fooLogical = hoge || 'bar'
const fooNullish = hoge ?? 'bar';
||は左の値がTruthyの値の時左の値を、Falsyの値の時右の値を返します。??は左の値がnullまたはundefinedの時に右の値を、それ以外の場合は左の値を返します。
例えばhogeがfalseの時は||であれば'bar'、??であればhogeを返します。nullの時は両方とも'bar'、123の時はhogeを返します。
それぞれの分岐を表にまとめました。X || 'dummy'、X ?? 'dummy'のような形式で実行したとします。
X |
|| |
?? |
|---|---|---|
'aaa' |
'aaa' |
'aaa' |
'' |
'dummy' |
'' |
123 |
123 |
123 |
0 |
'dummy' |
0 |
[1] |
[1] |
[1] |
[] |
'dummy' |
[] |
{} |
{} |
{} |
NaN |
NaN |
'dummy' |
null |
'dummy' |
'dummy' |
undefined |
'dummy' |
'dummy' |
??の場合はnullやundefinedの場合のみ右の値を使うと覚えておくと良いです。
??をできる限り使うようにする
||はFalsyの値の場合はすべて右の値を返すのでstring | nullのような型の値に対して行うときに空文字列であっても右の値を返すような想定外の挙動を起こすことがあります。これを防ぐためにtypescriptのeslintではprefer-nullish-coalescingというルールがあります。これは??の使用が可能なときは??を使うように矯正するというルールです。
以下のようにfooがnullの場合、文字列'is null'に置き換えるような関数を考えたときに
const hoge = (foo: string | null) => foo || 'is null';
下のように書くことを進めるようなエラー(もしくは警告)が出るようなルールです。これによってfooが空文字列の時に'is null'となってしまうことを防ぎます。
const hoge = (foo: string | null) => foo ?? 'is null';
もし空文字列の時も'is null'となってしまうことが正しい仕様の場合は一度string | nullからstringに型を絞ってから行う必要があります。