angular - typescript - nesne muhtemelen 'null'

Aşağıdaki için bu hatayı alıyorum ama program sorunsuz çalışıyor

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

    }

Bu sorudaki çözümü denedim ama benim için işe yaramadı.

Bu hata için uygun çözüm nedir?

Cevap #1

TypeScript'in bu senaryoyu ele almak için özel bir sözdizimi vardır, null olmayan doğrulama operatörü.

Değerin aslında null ya da undefined olmadığını **biliyorsanız** ama derleyici bunu bilmiyorsa, bunu iletmek için null olmayan onay operatörü !'yı kullanabilirsiniz. Bu, ifade bazında çalışır.

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

Ancak, söz konusu nesnenin ne null ne de undefined olduğunu kesin olarak bilmediğimiz çok daha olasıdır ve sonuçta, bu olasılık tipin kasıtlı olarak iletmek için yazıldığı şeydir. Böyle bir durumda, ! sözdizimini kullanmak derleme zamanı hatasını engeller ancak çalışma zamanı hatasına yol açabilir. Bu durumda, nesneyi başvurmadan önce doğruluğunu (truthy) sağlayarak olasılığı ele almalıyız. Bu kodu yazmak için yaygın bir deyim şudur:

if (video) {
  video.member
}

Aslında, TypeScript, kontrol akışı tabanlı tür analizi olarak bilinen bağlamsal tür kontrolü tekniğini kullanır ve bu sayede if deyimi bloğunda video değişkeninin güvenle referans alınabileceğini belirler, çünkü gerçek değer kontrolüyle birliğe dahil edilmiş null ve undefined türleri çıkarılmıştır. Bu nedenle, yukarıdaki kod herhangi bir hata vermez çünkü TypeScript bunun güvenli olduğunu bilir.

En iyisi ! sözdizimini çok nadir kullanmaktır.

Cevap #2

Şunu dene:

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

için :

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

Cevap #3

Simon'in cevabı ayrıca as kullanılarak da yazılabilir (bazı linterlar, örneğin airbnb, bunu tercih eder):

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

İlgili makaleler