Question

typescript - 对象可能为“null”

2017-05-13

91771

angular typescript

我收到以下错误，但程序运行正常

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

我尝试了在这个问题中的解决方案，但对我没有用。

如何正确修复此错误？

Answer 1

TypeScript 有一个处理这种情况的特殊语法，即非空断言运算符。

当您知道该值实际上既不是 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 ，毕竟，这种可能性正是类型特意编写来传达的。在这种情况下，使用 ! 语法可以抑制编译时错误，但可能会导致运行时失败。在这种情况下，我们应该通过在取消引用之前确保对象是真实的来处理这种可能性。编写此代码的常见习惯是

if (video) {
  video.member
}

事实上，TypeScript 使用一种称为基于控制流的类型分析的上下文类型检查技术，从而确定可以在 if 语句块中安全地取消引用 video ，因为 null 和 undefined 类型已通过真实性检查从联合中删除。因此，上述代码不会导致任何错误，因为 TypeScript 知道它是安全的。

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

Answer 2

尝试投射：

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

至：

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

Answer 3

Simon 的答案也可以使用 as 来编写（airbnb 等一些 linters 更喜欢这样做）：

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