StrictNullChecks and getElementById

Question

With StrictNullChecks enabled in TypeScript 2.0, the code

var el: HTMLElement = document.getElementById('element_id');

produces the error

Type 'HTMLElement | null' is not assignable to type 'HTMLElement'.
Type 'null' is not assignable to type 'HTMLElement'.

Why is this and how can I get the code to compile without making el nullable?

score 41 · Accepted Answer · answered Nov 16 '16 at 19:39

41

You can write:

var el = document.getElementById('element_id')!;

The ! means "trust me, this is not a null reference"

answered Nov 16 '16 at 19:39

AlexG

2,681
20
17

I've never seen this operator before...there seems to be very little documentation for it, but...great, elegant answer! – Matthew Layton Nov 16 '16 at 20:25
Cheers! yes don't remember where I saw that :p – AlexG Nov 16 '16 at 20:47
1

I had no clue this existed. This needs to be better documented. I was avoiding strictNullChecks because of cases like this. – pllee Dec 02 '16 at 19:46

score 2 · Answer 2 · edited May 23 '17 at 10:31

It is because document.getElementById(...); can return an instance of HTMLElement if the element is found, or null if it is not. Since this API is not under your control, you will have to modify your code to allow the element to be nullable:

var el: HTMLElement | null = document.getElementById("...");

You can also create your own nullable type aliases:

type NullableHTMLElement = HTMLElement | null;
var el: NullableHTMLElement = document.getElementById("...");

Or better still you could use the solution provided by AlexG which is even better!

score 1 · Answer 3 · answered May 04 '20 at 15:15

I know it's already late, I hope it will help someone else. For my scenario, I want to replace an input value... so the above answer threw one more error like "Property 'value' does not exist on type 'HTMLElement'." So I tried like below and it worked for me.

const el = document.getElementById("my_el_id") as any;
if(el){ //Even this condition not required
  el.value = "New value";
}

StrictNullChecks and getElementById

3 Answers3

Linked