将jspm与TypeScript一起使用

Question

是否可以将jspm与TypeScript和TypeScript模块系统结合使用？

我找不到文档或样本。

Answer 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');
});

Answer 2

2016年2月更新 ：根据Abhishek Prakash的要求，我在GitHub上设置了一个示例存储库 。 随意使用源代码，看看typescript和jspm工作流程的工作原理。

---

因为我想尝试使用TypeScript（这里引用版本1.5）与AngularJS和jspm一起工作，我找不到任何解决方案，但偶然发现了这个问题和史蒂夫的回答，但我还是无法使用它来处理这些信息。 所以我自己尝试了很多东西，最后让它发挥作用。 所以这里是一个关于如何在AngularJS环境中使用带有jspm的TypeScript的示例：

首先，使用jspm安装AngularJS

jspm install angular

然后使用tsd或手动安装DefinitelyTyped定义文件。 现在您可以使用ES6语法导入AngularJS：

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

import * as angular from 'angular';

快速说明，因为这让我在第一次尝试时发疯：你需要两者，一个正确的角度路径和类型定义！ 如果两个中的一个丢失（对我来说，我没有包括参考线），tsc将抛出

错误TS2307：找不到模块'angular'。

这很难调试，正如我一直认为的那样，它无法找到模块，但我错过了定义参考。 因此，请确保始终为您要导入的所有内容提供正确的定义！

然后使用tsc --module system app.ts编译TypeScript，而module的值可以是commonjs，amd，system或umd。 请选择您要在您的环境中使用的模块系统！ 没有必要使用SystemJS系统。 TypeScript编译器只会将特定的选定模块“模板”包装在您的代码周围（或者更好地表示创建指定模块类型的模块），因此可以在以后加载SystemJS（使用--module system ）。

在我的情况下，对于浏览器AngularJS环境我选择了amd（使用system不起作用，因为来自SystemJS的es6-module-loader无法加载文件......我不知道为什么！）。

使用--module amd开关，我可以使用以下命令轻松地在我的页面的HTML代码中使用SystemJS导入已编译的文件：

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

希望这会帮助那些独自留在文档中的人，就像我一样。

Answer 3

我已经尝试了官方JSPM网站上发布的当前解决方案，并且在这篇文章中暗示的一些git repos无济于事。 原因是使用当前的TS实现处理typescript枚举文件。 我建议您首先直接使用TS转换器来转换应用程序，然后通过JSPM构建工具运行此内容。

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