【TypeScript】エラー回避用Tips

非nullアサーション演算子!とオプショナル・チェイニング演算子?は、TypeScript でnullishな値を取り扱うための演算子です。

! (非nullアサーション演算子)

!は変数や式の末尾に使用され、その変数がnullまたはundefinedでないことをコンパイラに伝える。

• TypeScriptはその変数を非null・undefinedとして扱うようになる
• 絶対にnullやundefinedにならないと確信できる場合にのみ使用

const element: HTMLElement = document.getElementById('myElement')!;

? (オプショナル・チェイニング演算子)

• 主に?はオブジェクトのプロパティやメソッドへのアクセス時に使用される
• その直前のオブジェクトがnullまたはundefinedの場合、undefinedを返しエラーを回避する

const dateList: Date[] | undefined = getDateList();
const firstDate: string | undefined = dateList?.[0]?.toString();

非nullアサーション演算子とオプショナル・チェイニング演算子の違い

• !はこれは確実にnullではないとコンパイラに伝えるもの
• ?はもしnullまたはundefinedだったらundefinedを返すという安全なアクセスを提供するためのもの

null合体演算子

• fetchDataで取得した値がもしundefinedやnullだったら、falseを設定できる

const flag: boolean = fetchData() ?? false;