SystemJS：YouTube API 外部 JS 库被误认为是本地 TypeScript 模块

Question

训练我的 TypeScript 和 Angular 技能。首先暂时将 my simple HTML website 的两个脚本转换为 JUST TypeScript。我能够转换 Scroller 脚本，但在使用 YouTube API 时遇到问题，因为它是远程外部 JS 文件而不是 SystemJS 模块。

我未能让 API 在模块加载后触发它的功能。所以 here 我发现使用 'await import' 应该是可行的方法，但它行不通。

SystemJS.config({
  map: {
 youtube: "https://www.youtube.com/iframe_api"
  },
  meta: {
 "https://www.youtube.com/iframe_api": {
   "format": "global",
   "exports": "youtube",
   "scriptLoad": true,
   "build": false
 }
  }
});

...

export default class YouTubeService {
async loadAPI() {

 try {
  await import('youtube'); // automatically injects a script tag
  console.log('API loaded');
 }
 catch (e) {
  console.error('The YouTube API failed to load');
 }

TypeScript 抛出以下错误：

/js/main.ts [1 errors] (48, 17) File '/var/www/magia-ts/node_modules/@types/youtube/index.d.ts' is not a module.

原始源代码：https://github.com/Pendrokar/magia-ts/blob/7677f0ad1e2219ac041e3a8177561c36e905c3c3/js/main.ts#L48

Answer 1

当然，所谓的注入脚本的不干净方法有效：

try {
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  if (firstScriptTag.parentNode != null) {
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  // await import(youtube); // automatically injects a script tag
  console.log('API loaded');
} catch (e) {
  console.error('The YouTube API failed to load: ' + e);
}

Answer 2

由于 YouTube API 最初设计为全局加载，因此 @types/youtube 描述了它定义的全局 YT 变量。您已使用 SystemJS 配置并尝试导入的 youtube 虚拟模块未在任何地方为 TypeScript 声明。由于名称匹配，TypeScript 正在 @types/youtube 中寻找 youtube 模块的声明，但它不存在。您需要添加一个声明，该声明仅指示 youtube 模块与 @types/youtube 声明的 YT 全局变量相同。创建一个新文件 declaration.d.ts 包含：

declare module "youtube" {
    export = YT;
}

TypeScript 错误应该会消失。

顺便说一句，SystemJS配置条目中的exports不应该是YT，而不是youtube吗？

SystemJS：YouTube API 外部 JS 库被误认为是本地 TypeScript 模块

SystemJS: The YouTube API external JS library mistaken for local TypeScript module

youtube-api

youtube-javascript-api

typescript

systemjs