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

Question

我尝试使用 youtube iframe api用于显示和控制具有平滑的 angular2 集成的视频片段。尊重 typescript 的类型概念对 webpack 编译器和我很重要:)。

我的测试的快速设置:

使用 @angular/cli (版本 1.0.0-beta.32.3)设置和安装 ng2-youtube-player然后是两个小调整:

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

app.module 是根据 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[];
}

现在使用 ng serve webpack 编译没有错误，即使在 ng2-youtube-player 中有 YT unknown|包。

我在网上大量搜索后的问题:有人可以提供正确的 .d.ts 文件或告诉我如何找到吗？

Answer 1

这会为 YouTube iframe 安装 TypeScript 类型:

使用 yarn :

yarn add @types/youtube

或 NPM:

npm install @types/youtube

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

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