Angular 10'da Azure Media Player TypeScript tanımını nasıl kurulur

Angular 10 projesinde Azure Media Player için TypeScript tanımını ayarlarken sorun yaşıyorum. Belgelerden *.d.ts dosyasını kullanıyorum.

tsconfig.json dosyasında typeRoots kullanarak tanımı ayarlamayı denedim:

"typeRoots": [ "./src/types/", "./node_modules/@types"],

Türleri içeren klasörün ya kök seviyede ya da src klasörünün içinde bulunması gerektiğini belirten çelişkili eğitimler buldum. Şu anda, azuremediaplayer.d.ts dosyası ./src/types/azuremediaplayer/ içinde.

tsconfig dosyasında, 'azuremediaplayer' için tür tanım dosyası bulunamıyor. diye bir hata var.

Bileşenimde, resmi dokümantasyondan kodu, fonksiyonlar olmadan (hata verenler) kopyalayıp yapıştırdım.

ngOnInit(): void {
    var myPlayer = amp('vid1', {
      "nativeControlsForTouch": false,
      autoplay: false,
      controls: true,
      width: "640",
      height: "400",
      poster: ""
    });
    myPlayer.src([{
      src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest",
      type: "application/vnd.ms-sstr+xml"
    }])

  }

Yukarıdaki koddan amp üzerine ctrl+klik yaparsam, .d.ts dosyasına yönlendiriliyorum, ancak fonksiyon çağrısındaki bazı parametreler hata veriyor:

Argument of type '{ nativeControlsForTouch: boolean; autoplay: false; controls: true; width: string; height: string; poster: string; }' is not assignable to parameter of type 'Options'.


Object literal may only specify known properties, and '"nativeControlsForTouch"' does not exist in type 'Options'.

Başlatma bu şekilde olduğunda hiçbir hata görünmez:

var myPlayer = amp('vid1', {
      autoplay: false,
      controls: true,
      poster: ""
    });
    myPlayer.src([{
      src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest",
      type: "application/vnd.ms-sstr+xml"
    }])

  }

Oynatıcı, HTML dosyasında örneklendiğinde çalışır.

Ayrıca bu yanıtta açıklanan adımları da denedim: Eğer dosyayı /// <reference path="../../../types/azuremediaplayer/azuremediaplayer.d.ts" /> ile referans verirsem, hiçbir şey değişmiyor, yine de json'da hata yok. Eğer dosyayı files: [] özelliğime eklersem, amp() tanınmıyor. Eğer "include": ["src/**/*"] eklersem, bu typeRoot kullanmak ile aynı ve aynı hataları alıyorum.

Oyuncuyu çalışması için nasıl kurmalıyım?

Cevap #1

Bunun belirli bir çerçeveye özgü olduğunu sanmıyorum, bu yüzden bunu benim için çalışan React uygulamasına Typescript ile uyguladığımda yaptığım adımları açıklayacağım.

Tür tanımı dosyasını şunun içine kaydettim:

src/video-player/amp/azuremediaplayer.min.d.ts

tsconfig.json dosyama typeRoots özelliğini ekledim. Projenizin birkaç typescript yapılandırma dosyası kullanabileceğini unutmayın. Örnek: Benim projemde, varsayılan olan bir dosya ve npm yayın amacıyla tsconfig.package.json dosyası var. İşte her iki tsconfig dosyamda typeRoots yapılandırmam:

 "typeRoots": ["node_modules/@types", "src/video-player/amp"]

O zaman, kendi .tsx bileşen dosyamda, amp typescript tanımını şöyle kullanabilirim:

readonly options: amp.Player.Options;

Açıklamanıza göre türleri doğru yapılandırdığınıza inanıyorum. Types dosyasının sürümü CDN'den alınan AMP sürümüyle uyumlu mu? (En son 2.3.5 sürümünü kullanıyorum). Öyleyse, resmi türler dosyasında bir hata/hata olabilir - CDN'den alınan küçültülmüş komut dosyasında nativeControlsForTouch seçenek özelliğinizi görebiliyorum, ancak bu özellik türler dosyasında mevcut değil. ¯\_(ツ)_/¯

Not: AMP'in açık kaynaklı olmaması ve npm üzerinden tip bilgileri ile erişilememesi üzücü - lütfen burada oy vermeyi düşünün.