[typescript]!?の便利なアレ

あるのなか？ないのかな？

TypeScriptを書いていると、以下のような書き方が出てくる。

こんなん(Vueのref想定)

type Iremono = {
  aru: string;
  naikamo?: string;
}

const jittai = ref<Iremono>({
  aru: "初期値はコレ"
})

const naikamoUpper = computed(() => jittai.value.naikamo?.toUpperCase())

まぁサンプルなのでそんな書き方するかよみたいなクレームは一旦置いておいて、
参照しようとしている項目の中身が無い【かもしれない】(key自体ないとか、値がundefined)時に、
Javaで言うヌルポを回避するようなアレとして対象の項目の後ろに?を付けることがあるかと。

ココまではだいたいVSCodeとかの補完でいい感じに書いてくれていたりするんだけど、、、

絶対にココの処理に入るときは、値は入ってるの!! ?とかつけるのやーやーなの!!

わざわざif文書くのもやーやーなの!!になるケースも当然あるわけで。

そう!! 【絶対に】値が入っているとわかっている時に、
jittai.value.naikamo?.toUpperCase() じゃなくて、
jittai.value.naikamo.toUpperCase() って書くと
VSCodeは鬼の首を取ったかのごとく
オブジェクトは 'undefined' である可能性があります。ts-plugin(2532)
と画面を紅に染め上げてくるわけで。。。

回避するために以下のような書き方をして、

絶対にあるんだもん！

if(jittai.value.naikamo){
  jittai.value.naikamo.toUpperCase();
}

有るという前提を事前にチェックしたりしようとしますが、
この書き方でもオブジェクトは 'undefined' である可能性があります。って出ちゃう時があり、
STAP細胞のあの人みたいに【値は有ります!!】って涙で明日が見えないよね。
（どれだけ涙を流せば、貴方（エラー）を忘れられるだろう。。。）

そんなときの!←コレ

正式な名称はNon-null assertion operator（非nullアサーション演算子）っていうらしいです。
TypeScript公式？のリンク

書き方

obj?.STAP細胞   // STAP細胞 があったら取る、なければ undefined
obj!.STAP細胞   // STAP細胞 は必ずある！俺が保証する！（→ 実行時になかったら落ちる）

注意：

これはビルドを通す（コンパイルエラーをなくす）ための書き方となります。
要は「TypeScriptにウソをつく」ことになるので、ほんとに値がある場面でしか使っちゃダメです。
→コレで中身がnullやundefinedだったら普通にTypeErrorで落ちちゃうので