更新 - v1.5

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的要求，我已设置an example repository on 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：找不到模块＆＃39; angular＆＃39;。

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

然后使用tsc --module system app.ts编译TypeScript，而module的值可以是commonjs，amd，system或umd。请选择您要在您的环境中使用的模块系统！没有必要使用SystemJS系统。 TypeScript编译器只会包装特定的选定模块＆＃34; template＆＃34;围绕你的代码（或者更好地说创建一个指定模块类型的模块），所以稍后可以使用SystemJS加载它（使用--module system时）。

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

使用--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

将jspm与TypeScript一起使用

3 个答案:

更新 - v1.5

原始答案