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?

Answer 1

You can write:

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

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

Answer 2

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!