将 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 的要求，我已经设置 an example repository on 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';

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

error TS2307: Cannot find module 'angular'.

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

然后使用 tsc --module system app.ts 编译您的 TypeScript，而模块的值可以是 commonjs、amd、system 或 umd。请选择您要在您的环境中使用的模块系统！不需要为 SystemJS 使用系统。 TypeScript 编译器只会将特定的选定模块 "template" 包裹在您的代码周围（或者更好地说创建指定模块类型的模块），因此它可以稍后使用 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 官方网站上尝试了 posted 的当前解决方案，并且此 post 中暗示的一些 git 回购无济于事。原因是使用当前 TS 实现处理打字稿枚举文件。我建议您首先直接使用 TS 转译器转译应用程序，然后运行通过 JSPM 构建工具来转译此内容。

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

将 jspm 与 TypeScript 结合使用

Using jspm with TypeScript

module

typescript

typescript1.4

jspm

更新 - v1.5

原答案