找不到命名空间 'amp'

Question

我正在编写一个使用 Azure 媒体播放器的 React/TypeScript 项目。根据引用播放器下的 docs，我应该可以这样引用播放器：

var myPlayer = amp('vid1');

然后我得到一个编译器错误：

TypeScript error in C:/<file path>/<file name>.tsx(47,17):
Cannot find namespace 'amp'.  TS2503

我看到这是一个 TypeScript 错误，但文档是为 JavaScript 编写的。

所以我尝试使用 TypeScript：

let player: amp.Player = amp("player");

同样的编译器错误。

如何在我的 React/TypeScript 项目中引用 AMP 播放器？

Answer 1

TypeScript 报错，因为 amp 类型需要先导入。根据来自 CDN 的 this thread npm package for Azure Media Player with TypeScript definitions is not available yet. But since definitions are available，这里是一个如何将 custom 类型添加到项目的示例：

a) 下载 azuremediaplayer.d.ts 定义并将其放在 src 目录下，例如单独的文件夹 amp_typings:

amp_typings
    |
    azuremediaplayer.d.ts

b) 在 tsconfig.json:

的 compilerOptions 部分添加对此类型定义的引用

{
  "compilerOptions": {
    ...
    "typeRoots": ["node_modules/@types", "amp_typings"]
  },
  ...
}

就是这样，现在 amp 模块可以在 React 应用程序中使用了。

Here is a demo