?.
の意図と問題
pref
に付いている「?.
」はオプショナルチェーンという演算子です。質問のコードでの意図は、
getElementById
は null
を返す可能性がある
- よって
pref
は null
である可能性がある
null
のプロパティに通常の方法(.
など)でアクセスしてしまうとエラー(例外)になる
- エラーを避けるため、
?.
を使おう
といった所だと思われます。しかし、これには問題があり、?.
演算子を代入式の代入される側(左辺)で使うことはできません。その理由は、?.
演算子が undefined
を返すかも知れず、それにより undefined
に代入することになっては困るからでしょう。
対策: pref
が null
では無いことが確認された箇所で作業する
現象としては、TypsScript の型チェックが起り得るエラーを事前に発見してくれた、という事です。ですから対策としては、その起り得る状況(pref
が null
である)を実行時にチェックすることが考えられます。
if
内で pref
を触る例:
const pref = document.getElementById("prefectures")
// ここで `pref` の型は 「HTMLElement | null」
// つまり、`null` の可能性がある
if (pref !== null) {
// このブロックでは `pref` は `null` で無いことが確認済み
// 型は HTMLElement となっている
pref.textContent = "hello world";
} else {
// `null` であった場合の何らかの処理
throw "ID `prefectures` を持つ要素が見付かりません"
}
例外を発生させ早期脱出する例:
const pref = document.getElementById("prefectures")
// ここで `pref` の型は 「HTMLElement | null」
// つまり、`null` の可能性がある
if (pref === null) {
throw "ID `prefectures` を持つ要素が見付かりません"
}
// これ以降に処理が進む場合は、`pref` が `null` で無いことが確認済みとなる
// 型は HTMLElement となっている
pref.textContent = "hello world"
こういった処理を「型ガード」と呼ぶことがあります。