13

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

我找不到这方面的文档或样本。

4

3 回答 3

8

更新 - v1.5

SystemJS 已添加为 TypeScript 的模块类型，因此您应该能够开箱即用地使用 SystemJS 并使用模块标志进行编译：

tsc --module system app.ts

这是与 ES6 模块导入语法一起添加的，因此您应该能够使用该样式并将其编译为您需要的内容。

import * as $ from "jquery";

原始答案

如果你使用 SystemJS 语法，你可以像这样声明你需要的部分：

系统js.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');
});
于 2015-02-05T14:09:27.350 回答
4

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

由于我想尝试使用 TypeScript（此处引用版本 1.5）与 AngularJS 和 jspm 一起工作，我找不到任何解决方案，但偶然发现了这个问题和史蒂夫的回答，但我仍然无法使用该信息. 所以我自己尝试了很多东西，最终成功了。下面是一些关于如何在 AngularJS 环境中使用 TypeScript 和 jspm 的示例：

首先，使用 jspm 安装 AngularJS

jspm install angular

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

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

import * as angular from 'angular';

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

错误 TS2307：找不到模块“角度”。

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

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

就我而言，对于浏览器 AngularJS 环境，我选择了 amd（使用system不起作用，因为 SystemJS 的 es6-module-loader 无法以这种方式加载文件……我还不知道为什么！）。

使用该--module amd开关，我可以使用 SystemJS 在页面的 HTML 代码中轻松导入编译后的文件，方法是：

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

希望这会帮助像我一样在文档中独处的人。

于 2015-08-15T12:06:19.740 回答
1

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

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

于 2016-08-16T21:11:50.797 回答