Cannot find namespace 'amp'

Question

I am writing a React/TypeScript project that uses Azure Media Player. Per the docs under Referencing the Player, I should be able to reference the player like this:

var myPlayer = amp('vid1');

I then get a compiler error:

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

I see that this is a TypeScript error, but the docs are written for JavaScript.

So I try TypeScript:

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

Same compiler error.

How do I reference the AMP player in my React/TypeScript project?

Answer 1

TypeScript complains since amp types needs to be imported first. According to this thread npm package for Azure Media Player with TypeScript definitions is not available yet. But since definitions are available from CDN, here is an example how to add custom typings to project:

a) download azuremediaplayer.d.ts definitions and place it under src directory, for example in separate folder amp_typings:

amp_typings
    |
    azuremediaplayer.d.ts

b) add a reference to this type definitions in the compilerOptions section of your tsconfig.json:

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

That's it, now amp module could be used in React app.

Here is a demo