Подтвердить что ты не робот

Использование jspm с TypeScript

Можно ли объединить jspm с системой TypeScript и TypeScript?

Я не мог найти документацию или образцы этого.

4b9b3361

Ответ 1

Обновление - v1.5

SystemJS был добавлен как вид модуля для TypeScript, поэтому вы можете использовать SystemJS из коробки и скомпилировать с флагом модуля:

tsc --module system app.ts

Это было добавлено вместе с синтаксисом импорта модулей ES6, поэтому вы должны иметь возможность использовать этот стиль и скомпилировать его с тем, что вам нужно.

import * as $ from "jquery";

Оригинальный ответ

Если вы используете синтаксис SystemJS, вы можете объявить нужные вам части следующим образом:

systemjs.d.ts

interface System {
    then: (cb: Function) => void;
}

interface SystemStatic {
    import: (name: string) => System;
}

declare var System: SystemStatic;

export = System;

Затем вы сможете использовать его следующим образом:

/// <reference path="jquery.d.ts" />

import System = require('systemjs');

System.import('jquery').then(($: JQueryStatic) => {
    $('#id').html('Hello world');
});

Ответ 2

Обновление февраль 2016. По просьбе Абхишека Пракаша я установил примерный репозиторий в GitHub. Не стесняйтесь играть с источниками и смотрите, как работает рабочий процесс typescript и jspm.


Как я хотел попробовать typescript (ссылаясь на версию 1.5 здесь), чтобы работать вместе с AngularJS и jspm, я не мог найти никакого решения, но наткнулся на этот вопрос, и Стив ответил, но я все еще не мог сделать он работает с этой информацией. Поэтому я пробовал много вещей сам и, наконец, сделал его работу. Итак, вот пример использования typescript с jspm в среде AngularJS:

Сначала установите AngularJS с jspm с

jspm install angular

Затем установите определенные файлы определения с помощью tsd или вручную. Теперь вы можете импортировать AngularJS с синтаксисом ES6:

/// <reference path="typings/angularjs/angular.d.ts" />

import * as angular from 'angular';

Быстрая заметка, так как это сошло с ума от первых попыток: вам понадобятся и то, и другое, правильный путь к angular и определениям типов! Если один из них отсутствует (для меня я не включил опорную строку), tsc будет бросать

ошибка TS2307: не удается найти модуль 'angular'.

Это трудно отлаживать, как я всегда думал, он не смог найти модуль, но я просто пропустил ссылку на определение. Поэтому просто убедитесь, что у вас всегда есть правильные определения для всего, что вы пытаетесь импортировать!

Затем скомпилируйте свой typescript с помощью tsc --module system app.ts, тогда как значение для модуля может быть commonjs, amd, system или umd. Выберите систему модулей, которую вы хотите использовать в своей среде! Нет необходимости использовать систему для SystemJS. Компилятор typescript будет только обернуть шаблон выбранного выбранного модуля вокруг вашего кода (или, лучше сказать, создать модуль указанного типа модуля), поэтому его можно будет загрузить SystemJS позже (при использовании --module system).

В моем случае для среды браузера AngularJS я выбрал amd (использование system не помогло, так как загрузчик ESJ файлов из SystemJS не смог загрузить файлы... Я не знаю, почему все же!).

Используя переключатель --module amd, я мог бы легко импортировать скомпилированный файл с SystemJS внутри HTML-кода моей страницы, используя:

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
    System.import('src/app');
</script>

Надеюсь, это поможет кому-то, кто остался один в документации, как и я.

Ответ 3

Я пробовал текущие решения, размещенные на официальном сайте JSPM, и некоторые репозитории git, намеченные в этом сообщении, безрезультатно. Причина в том, что обработка typescript перечисляет файлы с текущей реализацией TS. Я предлагаю вам сначала перенести приложение с транспилером TS напрямую, а затем запустить этот контент с помощью инструментов сборки JSPM.

http://www.itsgettinghotamerica.com/2016/07/making-javascript-build-process-work.html