youtube.d.ts File for the youtube-iframe-api to us

Question

I try to use the youtube iframe api for showing and controling video snippets with a smooth angular2 integration. And respecting the type concept of typescript is important to the webpack compiler and me :).

The quick setup of my tests:

use @angular/cli (Version 1.0.0-beta.32.3) to setup and install the ng2-youtube-player and then two small adjustments:

ng new test002
cd test002
npm install ng2-youtube-player --save-dev

The app.module was extended according to ng2-youtube-player, but in the app.component I had a small correction and an error:

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',// app renamed to app-root
    template: `
        <youtube-player
      [videoId]="id"
      (ready)="savePlayer($event)"
      (change)="onStateChange($event)"
    ></youtube-player>
    `
})
export class AppComponent {
  player: YT.Player;// Error: Cannot find namespace 'YT'
  private id: string = 'qDuKsiwS5xw';

    savePlayer (player) {
    this.player = player;
    console.log('player instance', player)
    }
  onStateChange(event){
    console.log('player state', event.data);
  }
}

For the error I faked the namespace with a youtube.d.ts file:

// dummy namespace...
export as namespace YT;

export interface Player {
    name: string;
    length: number;
    extras?: string[];
}

Now using ng serve the webpack is compiling without error, even if there is YT unknown within the ng2-youtube-player package.

My question after intensive search on the internet: Can someone may provide a correct .d.ts file or tell me how to find out?

Answer 1

Actually, ng2-youtube-player provides its own TypeScript definitions, which is nice. You can see them under node_modules/ng2-youtube-player/ng2-youtube-player.d.ts.

To use them, do something like this:

import { YoutubePlayer, YoutubePlayerService } from 'ng2-youtube-player';

And in your component class (assuming of course you know how to use Zone):

@ViewChild('myElement') ref: ElementRef;
service: YoutubePlayerService = new YoutubePlayerService(this.someZone);
player: YoutubePlayer = new YoutubePlayer(this.service, this.ref);

Answer 2

So the question made reference to ng2-youtube-player and I went looking for its TypeScript declarations. It was later clarified that the OP is really looking for a d.ts file for the API itself.

Using Yarn:

yarn add youtube
yarn add @types/youtube

Or NPM:

npm install youtube
npm install @types/youtube

The first line installs the API, the second installs the typings, which seem complete.

You import it using:

import 'youtube';

Usage as per the API. I tested this with VS Code and got very nice code insight when using this.

Answer 3

As @Myonara stated, the accepted answer involved importing a youtube upload library which is extraneous to the actual solution.

Better yet:

1. Omit the npm youtube package from node_modules and package.json
2. Remove the line import 'youtube';
3. With @types/youtube installed, add the following to your project tsconfig.json under compilerOptions:

"typeRoots": [ "node_modules/@types" ], "types": [ "youtube" ]

The YT namespace will now be available.

playerStateChange(e) {
    switch (e.data) {
        case YT.PlayerState.PLAYING:
            console.debug('youtube playing');
            break;
        case YT.PlayerState.PAUSED:
            console.debug('youtube paused');
            break;
        case YT.PlayerState.ENDED:
            console.debug('youtube ended');
            break;
    }
}

Answer 4

I've been struggling with this and trying a bunch of things. In the end adding youtube to types in tsconfig.app.json which fixed it.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "types": ["youtube"]
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

The only other thing I did was:

npm install @types/youtube

This allows me to freely use new YT.Player(...) without any other tricks (such as just calling window['YT'] which I've seen.

If anybody can offer an explanation as to how my IDE (VS Code) can find it but the compiler can't I'm still curious!.