需要在Angular 2中使用的youtube-iframe-api的youtube.d.ts文件 [英] youtube.d.ts File for the youtube-iframe-api to use in Angular 2 needed

问题描述

我尝试使用 youtube iframe api 来显示和控制视频平滑的angular2集成的代码段.尊重打字稿的类型概念对webpack编译器和我来说都很重要:).

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 :).

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

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

app.module已根据 ng2-youtube-player 进行了扩展，但是在app.component中，我做了一个小小的修正和一个错误:

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

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

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[];
}

现在，即使在互联网上进行大量搜索后，我的问题是:有人可以提供正确的.d.ts文件还是告诉我如何查找?

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

推荐答案

这将安装YouTube iframe的TypeScript类型:

This installs the TypeScript types for the YouTube iframe:

使用纱线:

yarn add @types/youtube

或NPM:

npm install @types/youtube

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

As @TaeKwonJoe points out below, with @types/youtube installed, add the following to your project tsconfig.json under compilerOptions:

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

这篇关于需要在Angular 2中使用的youtube-iframe-api的youtube.d.ts文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！