如何在 Angular 10 中设置 Azure 媒体播放器打字稿定义

Posted 2023-03-13

【中文标题】如何在 Angular 10 中设置 Azure 媒体播放器打字稿定义

【英文标题】：How to set up Azure Media Player typescript definition in Angular 10

【发布时间】：2020-12-10 14:57:06

【问题描述】：

我在为 Angular 10 项目中的 Azure 媒体播放器设置打字稿定义时遇到问题。我正在使用来自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+click 上面代码中的 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,
      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"
    ])

  

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

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

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

【参考方案1】：

我不认为这是特定于框架的，因此我将描述我在使用 Typescript 将其实现到 React 应用程序中时执行的步骤。

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

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

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

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

然后，在我的组件 .tsx 文件中，我可以使用 amp typescript 定义，例如：

readonly options: amp.Player.Options;

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

注意：很遗憾 amp 不是开源的，并且可以通过 npm 进行输入访问 - 请考虑投票 here。