2

我在 Angular 10 项目中为 Azure 媒体播放器设置打字稿定义时遇到问题。我正在使用文档中的 *.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'.

在我的组件中，我从官方文档中复制粘贴了代码，没有函数（抛出错误）。

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 文件中实例化，则播放器可以工作。

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

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

4

1 回答 1

2

我不认为这是特定于框架的，所以我将描述我在使用 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）。如果是这样，则官方类型文件中可能存在错误/不准确 - 我可以nativeControlsForTouch在从 CDN 获取的缩小脚本中看到您的选项属性，但是，此属性不在类型文件中。¯\ (ツ) /¯

注意：很遗憾 amp 不是开源的，并且可以通过 npm 输入 - 请考虑在此处投票。

于 2020-09-11T09:55:21.637 回答