typescriptでのdom操作

Question

実現したいこと

typescriptで、HTML要素を取得して操作したい

発生している問題・エラーメッセージ

代入式の左辺には、省略可能なプロパティ アクセスを指定できません。

該当のソースコード

const pref = document.getElementById("prefectures");
pref?.textContent = "hello world";

試したこと

特になし

補足情報（FW/ツールのバージョンなど）

typescript:4.7.4
tsc:4.6.4
esnext

Comments

[退会済みユーザー]

そういえば pref?.textContent の ? は入力した覚えがないんですがこれは何なのでしょうか

Answer 1

document.getElementByIdの戻り値はnullを返す可能性がある型(HTMLElement | null)に設定されており、
そのままではprefがnullの場合pref.textContentが取得できない可能性があるということでエラーになっています。

以下のようにしてpref.textContentにアクセスする時点でperfがnullではないことが確実なコードにする必要があります。

const pref = document.getElementById("prefectures");

if(pref) 
{
    pref.textContent = "hello world";
} 

pref?.textContentの?はIDEがnullの可能性がある型の変数ということで勝手に挿入するようです。vscodeではそうなりました。