如何在Angular 10中设置Azure Media Player打字稿定义

问题描述

我在Angular 10项目中为Azure Media Player设置打字稿定义时遇到麻烦。我正在使用documentation

中的* .d.ts文件

我尝试使用tsconfig.json文件中的typeRoots设置定义：

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

我发现冲突的教程要求将包含类型的文件夹放置在根级别或src文件夹内。现在，azuremediaplayer.d.ts文件位于./src/types/azuremediaplayer/中。

在tsconfig文件中，有一个错误提示Cannot find type definition file for 'azuremediaplayer'.

在我的组件中，我从the official documentation复制粘贴了代码，但没有这些函数（这些函数会引发错误）。

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"
    }])

  }

如果我按Ctrl键并单击上面代码中的amp，我将被带到.d.ts文件，但该函数的调用抛出错误中有一些参数：

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'.

初始化时不会出现错误：

var myPlayer = amp('vid1',{
      autoplay: false,type: "application/vnd.ms-sstr+xml"
    }])

  }

如果播放器在html文件中实例化，则播放器可以正常工作。

我还尝试了in this answer中描述的步骤： 如果我使用/// <reference path="../../../types/azuremediaplayer/azuremediaplayer.d.ts" />引用文件，则没有任何变化，但json中没有错误。如果我将文件添加到我的files: []属性中，则无法识别amp()。如果我添加"include": ["src/**/*"]，则与使用typeRoot相同，但有相同的错误。

我应该如何设置播放器才能使其正常工作？

解决方法

我不认为这是特定于框架的，所以我将描述当我使用Typescript在React应用程序中实现它时对我适用的步骤。

我已将类型定义文件存储到：

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

我已将typeRoots属性添加到我的tsconfig.json中。请注意，您的项目可能会使用多个打字稿配置文件。例如：在我的项目中，我有默认值和tsconfig.package.json用于npm发布。 这是我在两个tsconfig.files中的typeRoots配置：

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

然后，在我的组件.tsx文件中，我可以使用类似amp的打字稿定义：

readonly options: amp.Player.Options;

根据您的描述，我相信您已正确配置了键入内容。键入文件的版本是否与从CDN提取的amp版本一致？ （我使用的是最新的2.3.5）。如果是这样，则官方键入文件中可能存在错误/错误-我可以在从CDN提取的缩小脚本中看到您的nativeControlsForTouch选项属性，但是，此属性不在键入文件中。 ¯\ （ツ） /¯

注意：这是一个耻辱的放大器，不是开源的，可以通过npm进行输入-请考虑投票here。