угловой — угловой2 TS импорт cdn js с системой JS

Angular2 TS импорт CDN JS с системой JS

Заключительное обновление Итак, после небольшого исследования и лучшего понимания происходящего (до некоторой степени), я захотел добавить обновление, которое могло бы иметь немного больше смысла. В какой-то степени и оригинал, и обновление содержали ложную информацию.

Одна вещь из обновления, которая была неверной, это мое утверждение о том, что VS Code трактует инструкцию import по-разному. Правильный оператор — SystemJS, и компилятор TypeScript по-разному обрабатывает инструкцию import. В базовом случае SystemJS (когда он загружает файлы JS) он даже не видит эти операторы импорта, он видит продукт операторов импорта (основываясь на том, как Typescript сконфигурирован в файле tsconfig.json).

Таким образом, в этом вопросе единственной «связью» между TypeScript и SystemJS в выражении «import» является «twitch-api». TypeScript преобразует файл .ts в файл .js, который SystemJS будет читать при загрузке страницы, и будет искать в настройках конфигурации пакет с именем «twitch-api». Вот почему ваш сайт будет работать, если вы закомментировали использование объекта «Twitch» для запуска сайта, а затем раскомментировали объект «Twitch», SystemJS уже загрузил этот пакет на ваш сайт, так что он будет работать.

Итак, что касается компилятора TypeScript, когда компилятор сталкивается с оператором import, он имеет свой собственный набор правил (см. Раздел «Как TypeScript разрешает модули»). Исходя из этого, мы видим, что TypeScript не обращает внимания на SystemJS, он просматривает только определенные места в структуре вашей папки.

Поскольку импорт является не относительным типом, он будет искать в ваших node_modules соответствие «twitch-api», он также будет искать файлы с расширением [‘.ts’, ‘. Tsx’, ‘. D. ц]. Интересно, что это URL, в структуре папок нет файлов. В нормальных условиях TypeScript нуждается в этом, чтобы он мог правильно построить файл JS. К сожалению, Twitch не предлагает файл .ts / .tsx / .d.ts, а DefinitiveTyped не предлагает файл .d.ts для Twitch.

Так что я решил обойти это, создав собственный файл .d.ts для Twitch (не полный, и это не совсем то, что на самом деле делает Twitch). Таким образом, в моей папке «node_modules» я создал папку с именем «twitch-api», а затем создал файл «index.d.ts», в который я поместил это определение (чтобы еще раз пояснить, это не определение код, поскольку я не знаю, что на самом деле возвращает метод «Twitch.Player (» video-player «, options);», но он все еще работает, потому что SystemJS не использует файл определения.)

export class Twitch{ static Player(type:string,options:{}):void; } export class Player{ constructor(type:string,options:{}); } 

После того, как эти две вещи были созданы, я смог использовать полный оператор импорта, такой как

 import {Twitch,Player} from 'twitch-api' 

В вашем случае вам, вероятно, придется добавить больше в ваш файл определения для любых других методов или свойств, которые вы используете для объекта Twitch / Player.

Наконец, я не уверен, почему вы смогли обойти эту проблему, просто объявив переменную с помощью «Twitch: any». Я думаю, это потому, что «import ‘twitch-api'» заставляет компилятор TypeScript не выполнять определенные проверки, которые он обычно делает. Это будет означать, что ему просто нужно знать, что такое «Twitch», и не будем углубляться в него. Это мое лучшее предположение.


Обновление Итак, мое первое предположение было совершенно неверным, я начал играть с плукером, основываясь на ваших настройках, и стало ясно, что это что-то другое. Я раздвоил плункер в новый, и если бы я знал, как правильно создать экземпляр Twitch.Player, он бы работал в этом примере.

Это должно было быть очевидно, когда оно работало бы после внесения изменений во время работы. Ошибка, которую вы видите в компиляторе Typescript. Я не знаю, какую IDE вы используете, но я использую код VS и сталкиваюсь с этим, потому что оператор import работает иначе, чем в Plunker.


Я думаю, что вы почти на месте, но вам нужно сочетание обоих. Причина, по которой первый пример не удался, заключается в том, что «twitch-api» не является распознанным пакетом из команды импорта.

Я думаю, что ваша вторая попытка не удалась, потому что вы реализуете карту и упаковываете объекты. Вот плункер, который показывает, как реализовать вашу конфигурацию, используя внешний URL. Вот выдержка из файла config.js. Я не уверен во всех правилах, когда вам нужно использовать свойство «main», я думаю, что вы должны использовать его, если файл не назван «index» или он не соответствует имени пакета?

 var map = { 'app': 'src', // 'dist', 'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6', 'ng2-toastr': 'https://npmcdn.com/ng2-toastr@0.3.0' }; var packages = { 'app': { main: 'app.ts', defaultExtension: 'ts' }, 'rxjs': { defaultExtension: 'js' }, 'ng2-toastr': { main: 'bundles/ng2-toastr.js', defaultExtension: 'js' } }; 

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector