需要用于Angular 2中的youtube iframe api的youtube.d.ts文件

我尝试使用平滑的angular2集成来显示和控制视频片段。尊重typescript的类型概念对Web包编译器和我来说很重要：）

快速设置我的测试： 使用（版本1.0.0-beta.32.3）设置并安装，然后进行两次小调整：

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

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

现在使用ng serve，即使包中存在未知的YT，Web包也可以无错误地编译

---

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

实际上，

ng2 youtube player提供了自己的类型脚本定义，这很好。您可以在
节点模块/ng2-youtube-player/ng2-youtube-player.d.ts
下看到它们

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

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

在您的组件类中（假设您当然知道如何使用
Zone
）：

这将为YouTube
iframe
安装类型脚本：

使用纱线：

yarn add @types/youtube

或NPM：

npm install @types/youtube

正如@TaeKwonJoe在下面指出的，在安装了
@types/youtube
之后，将以下内容添加到
编译器选项下的项目
tsconfig.json
：

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

正如@Myonara所说，公认的答案涉及导入与实际解决方案无关的youtube上载库

更好的是：

从node_modules和package.json中省略npm youtube包
删除行
导入“youtube”

安装@types/youtube后，将以下内容添加到compilerOptions下的项目tsconfig.json中：
“类型根”：[
“节点\模块/@类型”
],
“类型”：[“youtube”]

YT名称空间现在将可用

playerStateChange(e) {
    switch (e.data) {
        case YT.PlayerState.PLAYING:
            console.debug('youtube playing');
            break;
        case YT.PlayerState.PAUSED:
            console.debug('youtube paused');
            break;
        case YT.PlayerState.ENDED:
            console.debug('youtube ended');
            break;
    }
}

我一直在努力解决这个问题，尝试了很多事情。最后添加
youtube
，将其修复

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

我唯一做的另一件事是：

npm install @types/youtube

这使我可以自由地使用
新的YT.Player（…）
，而无需任何其他技巧（例如只调用
窗口['YT']
，我已经看到了

如果有人能解释一下我的IDE（VS代码）是如何工作的我仍然很好奇！
哦，是的，
node\u modules/ng2-youtube-player/ng2-youtube-player.d.ts
在npm包中，而不是在github项目中，不管出于什么原因。但是它没有声明YT内容，这在示例中，插件也没有为播放器本身提供完整的参数列表如中所述，感谢您提及软件包中的d.ts文件。什么是“YT内容”，确切地说？您缺少哪些特定的类/类型？因为您所指的
Player
类几乎肯定是声明的
YoutubePlayer
。Afaik是脚本从
https://www.youtube.com/iframe_api
如中所述。声明的youtube播放器只有一个功能的子集，这就是我想要YT.d.ts文件的原因…好吧，所以我没有意识到你实际上在寻找Youtube库本身的打字。我不认为从你的帖子中可以明显看出这一点。实际上，我只花了一分钟看了一下
ng2 Youtube player
，它只是包装了API，所以
YT.player
变成
YoutubePlayer
。您在寻找哪些缺少的功能？YT名称空间由
@types/youtube
包定义，这是我搜索的，谢谢。
youtube
包包含一个专门用于上传youtube视频的不同界面（如果我读了
节点\u modules/youtube/lib/youtube.js
right…）。感谢分享！在第3步中，除了添加到
文件
数组中，您还可以将
youtube
添加到tsconfig.json中的
类型
数组中。这给了我一个
错误，没有找到“AppModule
的NgModule元数据：-/@Simon_Weaver您安装了youtube类型吗？例如
npm install--save dev@types/youtube
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "types": ["youtube"]
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

npm install @types/youtube