typescript - object is possibly 'null'

Question

I get this error for the following but the program running perfectly

var video = document.querySelector('#camera-stream'),

if(!navigator.getMedia){
        displayErrorMessage("Your browser doesn't have support for the navigator.getUserMedia interface.");
    }
    else{
        // Request the camera.
        navigator.getMedia(
            {
                video: true
            },
            // Success Callback
            function(stream:any){

                // Create an object URL for the video stream and
                // set it as src of our HTLM video element.
                video.src = window.URL.createObjectURL(stream);

                // Play the video element to start the stream.
                video.play();
                video.onplay = function() {
                    showVideo();
                };

            },
            // Error Callback
            function(err:any){
                displayErrorMessage("There was an error with accessing the camera stream: " + err.name, err);
            }
        );

    }

example error

I tried the solution in this questions but didn't work for me.

What is the proper fix for this error?

Aluan Haddad · Accepted Answer · 2020-10-08 13:25:35Z

37

TypeScript has a special syntax for handling this scenario, the non-null assertion operator.

When you know the value is actually neither null nor undefined but the compiler does not, you can use the non-null assertion operator, !, to communicate this. This works on an expression by expression basis.

declare let video: HTMLVideoElement | null | undefined;

video.src = window.URL.createObjectURL(stream); // error

video!.src = window.URL.createObjectURL(stream); // OK

video.autoplay = true; // error as the `!` does not percolate forward

video!.autoplay = true; // OK

However, it is far more likely that we do not definitively know that the object in question is neither null nor undefined and, after all, that possibility is what the type was deliberately written to convey. In such a case, using the ! syntax would suppress a compile time error but could result in a runtime failure. In this case we should rather handle the possibility by ensuring that the object is truthy before dereferencing it. A common idiom for writing this code is

if (video) {
  video.member
}

In fact, TypeScript uses a contextual type checking technique known as control flow based type analysis and thereby determines that video can safely be dereferenced in the if statement block because the null and undefined types have be removed from the union by truthy check. Therefore, the above code does not result in any errors because TypeScript knows that it is safe.

It is best to use the ! syntax very sparingly.

edited Oct 8, 2020 at 13:25

answered May 14, 2017 at 3:16

Aluan Haddad

32.1k10 gold badges83 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pavindu Over a year ago

The same can be done with the new optional chaining operator (?.)

Aluan Haddad Over a year ago

That's true, but it wasn't sure at the time I wrote the answer.

Pavindu Over a year ago

Yeah..That had not been standardized those days. just wanted to let the future readers know :-)

Simon · Accepted Answer · 2017-05-13 09:03:18Z

18

Try casting:

var video = document.querySelector('#camera-stream')

to:

var video = <HTMLVideoElement>document.querySelector('#camera-stream')

answered May 13, 2017 at 9:03

Simon

2,7036 gold badges39 silver badges55 bronze badges

Comments

wfreude · Accepted Answer · 2019-06-17 09:36:22Z

13

Simon's answer can also be written using as (preferred by some linters like airbnb):

var video = document.querySelector('#camera-stream') as HTMLVideoElement;

answered Jun 17, 2019 at 9:36

wfreude

5083 silver badges10 bronze badges

Comments

Ali Tourani · Accepted Answer · 2019-03-09 08:54:40Z

6

Generally, if you want to disable the strict null checks function in TypeScript, you can use the character ! where the error is shown, as below:

this.myRef.current!.value = ''

Note: do this if you're sure about the object

answered Mar 9, 2019 at 8:54

Ali Tourani

1,2673 gold badges23 silver badges34 bronze badges

1 Comment

cssyphus Over a year ago

How is this answer different from the most-upvoted answer that was written two years before this one? -1

Collectives™ on Stack Overflow

typescript - object is possibly 'null'

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related