找不到命名空间'amp'

Question

我正在编写一个使用Azure Media Player的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类型。根据this thread，带有TypeScript定义的Azure Media Player的npm包尚不可用。但是由于来自CDN的定义are available，下面是一个示例如何将custom类型添加到项目中：

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应用程序中使用。

Here is a demo