SystemJS: внешняя библиотека JS API YouTube ошибочно принята за локальный модуль TypeScript - PullRequest
Новая
       10

SystemJS: внешняя библиотека JS API YouTube ошибочно принята за локальный модуль TypeScript

0 голосов
/ 03 октября 2018

Обучение моим навыкам TypeScript и Angular.Сначала конвертируем мой простой HTML-сайт с двумя скриптами в JUST TypeScript на данный момент.Мне удалось преобразовать скрипт Scroller, но у меня возникли проблемы с API YouTube, поскольку это удаленный внешний файл 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

Ответы [ 2 ]

0 голосов
/ 04 октября 2018

Поскольку API YouTube изначально был разработан для глобальной загрузки, @types/youtube описывает глобальную переменную YT, которую он определяет.Виртуальный модуль youtube, который вы настроили с помощью SystemJS и пытаетесь импортировать, нигде не объявлен для TypeScript.Поскольку имя совпадает, TypeScript ищет объявление модуля youtube в @types/youtube, но его там нет.Вам необходимо добавить объявление, которое просто указывает, что модуль youtube совпадает с глобальной переменной YT, объявленной @types/youtube.Создайте новый файл declaration.d.ts, содержащий: 

declare module "youtube" {
    export = YT;
}

, и ошибка TypeScript должна исчезнуть.

Кроме того, не должно быть exports в записи конфигурации SystemJS YT, а не youtube?

0 голосов
/ 03 октября 2018

Конечно, предположительно нечистый метод введения сценария работает: 

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