document.getElementById("id") may be null

Question

Edit: I'm using TypeScript v2.2.1

I am new to TypeScript and I'm not sure what the cleanest way of dealing with DOM elements that may or may not exist is. Basically, I want to check whether an element exists, and then if it does, add an event listener to it (I have --strict_null_checks turned on).

When I do it the JS-like way:

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

I get the error my_script.ts(3, 3): error TS2531: Object is possibly 'null'.

I can get around this by using a not-null assertion:

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

But my understanding is that those sorts of assertions are generally frowned upon, and aesthetically, I don't like creating twice as many variables.

Is there a cleaner way to do this?

Answer 1

You should type your variables. I haven't done a lot with const, but your second options seems plain wrong (code-smell).

You should be able to get around the warning by strictly typing the variable. The compiler currently sees this as

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

If you change it to also possibly be null, then nulls are allowed:

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

Updated

Second option (that I haven't tried): use the ! at the end of the potentially null operation, per https://stackoverflow.com/a/40640854/2084315

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