web-dev-qa-db-ja.com

document.getElementById（ "id"）はnullの場合があります

編集：TypeScript v2.2.1を使用しています

私はTypeScriptを初めて使用しますが、存在する場合と存在しない場合があるDOM要素を処理する最もクリーンな方法が何かわかりません。基本的に、要素が存在するかどうかを確認し、存在する場合はイベントリスナーを追加します（_--strict_null_checks_をオンにします）。

JSのような方法で実行する場合：

_const myElement = document.getElementById('my-id');
if (myElement) {
  myElement.addEventListener('click', (e:Event) => {
    // Do stuff.
  });
}
_

エラーmy_script.ts(3, 3): error TS2531: Object is possibly 'null'.が表示されます

Null以外のアサーションを使用してこれを回避できます。

_const maybeMyElement = document.getElementById('my-id');
if (maybeMyElement) {
  const myElement = maybeMyElement!;
  myElement.addEventListener('click', (e:Event) => {
    // Do stuff.
  });
}
_

しかし、私の理解では、これらの種類のアサーションは一般的に眉をひそめられており、美的には、2倍の変数を作成することは好きではありません。

これを行うよりクリーンな方法はありますか？

typescripttypescript2.0
11
Evan Hefner

変数を入力する必要があります。私はconstをあまり使いませんでしたが、2番目のオプションは明らかに間違っています（コード臭）。

変数を厳密に入力することにより、警告を回避できるはずです。コンパイラは現在、これを

const myElement: HTMLElement = document.getElementById('my-id');

おそらくnullになるように変更すると、nullが許可されます。

const myElement: HTMLElement | null = document.getElementById('my-id');

更新済み

2番目のオプション（試したことがない）：!https://stackoverflow.com/a/40640854/2084315 に従って、潜在的にnullの操作の最後に

const myElement = document.getElementById('my-id')!;
13
ps2goat

以下を使用してみてください。

if (!!myElement) {
    myElement.addEventListener('click', (e:Event) => {
        // Do stuff.
    });
}

!!は、オブジェクト式をブール値に強制します。 !演算子を2回。詳細については、 this answer を参照してください

2
Amy