angular - typescript - 对象可能是 'null'

Question

我收到以下错误，但程序运行完美

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);
            }
        );

    }

我尝试了解决方案 in this questions但对我不起作用。

此错误的正确修复方法是什么？

Answer 1

TypeScript 有一个特殊的语法来处理这种情况，non-null assertion operator .

当您知道该值实际上既不是null 也不是undefined 但编译器不知道时，您可以使用非空断言运算符, !, 来传达这一点。这在逐个表达式的基础上起作用。

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

然而，更有可能的是我们不确定所讨论的对象既不是 null 也不是 undefined，毕竟，这种可能性就是type 是故意写来传达的。在这种情况下，使用 ! 语法会抑制编译时错误，但可能会导致运行时失败。在这种情况下，我们应该通过在取消引用之前确保对象是真实的来处理这种可能性。编写此代码的常用习惯用法是

if (video) {
  video.member
}

事实上，TypeScript 使用一种称为 control flow based type analysis 的上下文类型检查技术。从而确定 video 可以在 if 语句 block 中安全地取消引用，因为 null 和 undefined 类型已被通过真实检查从工会中移除。因此，上面的代码不会导致任何错误，因为 TypeScript 知道它是安全的。

最好非常谨慎地使用 ! 语法。