document.getElementById („id“) kann null

Question

bearbeiten sein: Ich bin mit Typoskript v2.2.1

Ich bin neu in Typoskript und ich bin nicht sicher, was die sauberste Weg mit DOM-Elemente des Umgangs, die möglicherweise oder kann nicht existieren ist. Im Grunde möchte ich prüfen, ob ein Element existiert, und wenn dies der Fall ist, füge einen Ereignis-Listener hinzu (Ich habe --strict_null_checks aktiviert).

Als ich ihm die JS-ähnliche Art und Weise tun:

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

Ich erhalte den Fehler my_script.ts(3, 3): error TS2531: Object is possibly 'null'.

ich um diesen durch die Verwendung einer nicht-null Behauptung bekommen kann:

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

Aber mein Verständnis ist, dass diese Art von Behauptungen generell verpönt sind, und ästhetisch mag ich es nicht, doppelt so viele Variablen zu erzeugen.

Gibt es einen saubereren Weg, dies zu tun?

Answer 1

Versuchen Sie es mit der folgenden:

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

Die !! nötigt ein Objekt Ausdruck in einen boolean. Es ist der Operator ! zweimal. Weitere Informationen hierzu finden Sie unter this answer

Answer 2

Sie sollten Ihre Variablen eingeben. Ich habe nicht viel mit const gemacht, aber Ihre zweite Option scheint einfach falsch (Code-Geruch).

Sie sollten in der Lage sein, die Warnung zu umgehen, indem Sie die Variable genau eingeben. Der Compiler sieht dies derzeit als

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

Wenn Sie es möglicherweise auch null sein ändern, dann werden NULL-Werte zulässig:

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

Aktualisiert

Zweite Option (dass ich nicht versucht): Verwenden Sie die ! am Ende der potenziell Null-Operation, per https://stackoverflow.com/a/40640854/2084315

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