! (Non-null assertion )や ?. (Optional chaining)についてまとめてみる

Javascript や typescript の学習を進めていると、 ! や ? といった演算子がちょくちょく登場するのですが、理解が曖昧のため使い方を整理して理解を深めたいと思います。

! (Non-null assertion operator / 非null アサーション)

これは、型チェックをする際に、null また undefined の可能性を無視することをコンパイラに伝えるものです。

使い方

let foo: string | undefined;
foo = "Hello";
console.log(foo!.length);  // ! を入れることで、コンパイル時にエラーにならず、実行時にエラーも発生しません

?. (Optional chaining)

オブジェクトのプロパティにアクセスする際に 、?. を使うことで左側の値が null または undefined の場合は エラーではなく、undefinedを返すものです。

let user: { name?: string } = {};
console.log(user.name.toUpperCase()); // user.nameにアクセスできないずエラーが生じる

let user: { name?: string } = {};
console.log(user.name?.toUpperCase()); // undefined　が表示される

また? は、プロパティや引数に使うこともでき、これをつけることでプロパティや引数をオプショナルにすることができます。

上記の例では、name? とすることで、name プロパティが空のオブジェクトであることを許容しています。