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

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服务webpack正在编译而没有错误,即使在ng2-youtube-player包中存在YT未知.

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

Answer 1

所以这个问题引用了ng2-youtube-player,我去寻找它的TypeScript声明.后来澄清说OP正在寻找d.tsAPI本身的文件.

使用纱线:

yarn add youtube
yarn add @types/youtube

或NPM:

npm install youtube
npm install @types/youtube

第一行安装API,第二行安装类型,看起来很完整.

您使用以下方法导入

import 'youtube';

根据API使用.我使用VS Code对此进行了测试,并在使用时获得了非常好的代码洞察力.