找不到命名空间“amp”

Question

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

var myPlayer = amp('vid1');

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

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

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

所以我尝试打字稿：

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

同样的编译器错误。

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

Answer 1

TypeScript 会抱怨，因为amp需要先导入类型。根据此线程，带有 TypeScript 定义的 Azure 媒体播放器的 npm 包尚不可用。但由于定义可从 CDN 获得，以下是如何向项目添加自定义类型的示例：

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

amp_typings
    |
    azuremediaplayer.d.ts

b) 在compilerOptions您的tsconfig.json以下部分添加对此类型定义的引用：

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

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

这是一个演示