需要在 Angular 2 中使用 youtube-iframe-api 的 youtube.d.ts 文件

我尝试使用YouTube iframe API https://developers.google.com/youtube/iframe_api_reference?hl=de用于通过平滑的 Angular2 集成来显示和控制视频片段。尊重 typescript 的类型概念对于 webpack 编译器和我来说很重要:)。

我的测试的快速设置：

use @角/cli https://cli.angular.io/（版本 1.0.0-beta.32.3）设置并安装ng2-youtube-播放器 https://www.npmjs.com/package/ng2-youtube-player然后进行两个小调整：

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

app.module 根据以下内容进行了扩展ng2-youtube-播放器 https://www.npmjs.com/package/ng2-youtube-player，但在 app.component 中我有一个小修正和一个错误：

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);
  }
}

对于该错误，我使用 youtube.d.ts 文件伪造了名称空间：

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

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

现在使用 ngserve webpack 编译时不会出现错误，即使其中存在未知的 YTng2-youtube-播放器 https://www.npmjs.com/package/ng2-youtube-player包裹。

在互联网上进行大量搜索后，我的问题是：有人可以提供正确的 .d.ts 文件或告诉我如何找到答案吗？

这将安装 YouTube 的 TypeScript 类型iframe:

使用纱线：

yarn add @types/youtube

Or NPM:

npm install @types/youtube

正如@TaeKwonJ​​oe 在下面指出的那样，@types/youtube安装后，将以下内容添加到您的项目中tsconfig.json under compilerOptions:

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