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

Question

我尝试通过一个平滑的angular2集成来使用youtube iframe api来显示和控制视频片段。并且尊重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

根据ng2-youtube-player扩展了app.module，但在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[];
}

现在，即使ng2-youtube-player包中存在未知的YT，也可以使用ng serve进行编译，而不会出错。

在互联网上密集搜索后，我的问题是:有人能提供正确的.d.ts文件或告诉我如何查找吗？

Answer 1

这将安装YouTube iframe的TypeScript类型

使用Yarn：

yarn add @types/youtube

或NPM：

npm install @types/youtube

正如@TaeKwonJoe在下面指出的，在安装了@types/youtube的情况下，将以下内容添加到compilerOptions下的项目tsconfig.json中

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

Answer 2

我一直在努力解决这个问题，并尝试了很多方法。最后，在types in tsconfig.app.json中添加youtube，修复了这个问题。

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

我做的另一件事是：

npm install @types/youtube

这使我可以自由地使用new YT.Player(...)，而不需要任何其他技巧(例如，只调用我所见过的window['YT']。

如果有人可以解释一下我的IDE (VS Code)如何找到它，但是编译器不能，我仍然很好奇！

Answer 3

实际上，ng2-youtube-player提供了自己的TypeScript定义，这很好。您可以在node_modules/ng2-youtube-player/ng2-youtube-player.d.ts下查看它们。

要使用它们，请执行以下操作：

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

在您的组件类中(当然，假设您知道如何使用Zone)：

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