时间戳

首页 > 解决方案 > SystemJS：YouTube API 外部 JS 库被误认为是本地 TypeScript 模块

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

问题描述

训练我的 TypeScript 和 Angular 技能。首先，暂时将我的简单 HTML 网站的两个脚本转换为JUST TypeScript。我能够转换 Scroller 脚本，但是 YouTube API 出现问题，因为它是远程外部 JS 文件而不是 SystemJS 模块。

加载后我未能让 API 触发模块的功能。所以在这里我发现使用'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 错误] (48, 17) 文件 '/var/www/magia-ts/node_modules/@types/youtube/index.d.ts' 不是模块。

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

标签： typescriptyoutube-apisystemjsyoutube-javascript-api

解决方案

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

declare module "youtube" {
    export = YT;
}

并且 TypeScript 错误应该会消失。

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

推荐阅读