找不到命名空间“amp”

【问题标题】：Cannot find namespace 'amp'找不到命名空间“amp”
【发布时间】：2019-10-03 22:55:19
【问题描述】：

我正在编写一个使用 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 播放器？

【问题讨论】：

【解决方案1】：

TypeScript 抱怨，因为需要先导入 amp 类型。根据 this thread 带有 TypeScript 定义的 Azure 媒体播放器的 npm 包尚不可用。但是由于定义了来自 CDN 的 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 应用中使用了。

【讨论】：