如何使 Typescript 与 SystemJS 和 Angular 一起使用成为可能？答案

【问题标题】：How to make it possible to use Typescript with SystemJS and Angular?如何使 Typescript 与 SystemJS 和 Angular 一起使用成为可能？
【发布时间】：2015-01-07 15:29:28
【问题描述】：

我正在尝试使 SystemJS 与 Typescript 一起使用，但它们似乎相互冲突。

我怎样才能利用 System.js 的自动加载而不与 Typescript 上的关键字冲突？使用 import / require 使 Typescript 使用它自己的方式来加载和引用文件，虽然它将 export 转换为 module.exports = ...，但它对 import 的作用不同

是否有可能实现这一点，否则我将不得不等待 Typescript 支持 ES6 关键字？

【问题讨论】：

标签： angularjs typescript commonjs systemjs

【解决方案1】：

TypeScript 1.5 添加了对编译为 ES5 SystemJS 模块语法的支持。

编写一个类似的类：

export class Foo {}

然后编译

tsc --module system foo.ts

结果将是一个使用 SystemJS 格式的 ES5 模块。

【讨论】：

【解决方案2】：

在 TypeScript 中，您将编写以下导入语句...

import dep = require('dep');

console.log(dep);

编译时，传递模块标志：

tsc --module commonjs app.ts

这告诉 TypeScript 以 CommonJS 样式模块为目标（如果需要，它也可以以 AMD 为目标 - SystemJS 支持这两种语法样式）。

输出如下：

var dep = require('dep');

console.log(dep);

此输出类似于SystemJS documentation 中的以下示例。

// library resource
var $ = require('jquery'); // -> /lib/jquery.js

// format detected automatically
console.log('loaded CommonJS');

如果您需要更多帮助，您可以提出问题并提供具体示例来证明该问题，我们将能够提供更具体的建议。

【讨论】：

嗯，SystemJS 使用 ES6 语法和 traceur，这是迄今为止我在两者之间找到的最大优势。 import _ from 'something' Typescript 中的错误。由于 Typescript 编译为 ES5，我永远无法从中获得一个工作的“本机”ES6 模块，并且它失败了 SystemJS
ES6 支持在 TypeScript 的路线图上（即编译到 ES6 模式）。
"compile to es6" flag 可能是我正在寻找的，无论何时实现。
它在 TypeScript 1.5 beta 中。

【解决方案3】：

你可以看到 here 我使用 traceur 而不是 Typescript 的方式，但它应该与 Typescript 几乎相同，我会在可以再次使用它时添加 ts。

注意：与其说是种子，不如说是自我提醒或游乐场

正如 Steve 提到的 SystemJs 的最强点是你可以使用几乎任何模块定义，加载器应该检测模块格式，我个人更喜欢像在

中声明模块

define([deps...],(deps..){
    // ...
})

我发现它就像来自其他语言和框架的构造函数注入模式，它总是转换为相同的 Javascript，因为它是 Javascript ，用类和箭头函数美化（+用 typescript 类型注释）。

同样选择 amd 也清楚地表明了异步意图，如果你选择让我们说 ES6 模块语法，那将是一种荣誉，因为 import 语句之后的代码只会在依赖项完成加载时执行。非常像 async 关键字，对于未启动的人来说感觉有点太神秘了

顺便说一句：和 OutOFcontext：SA / JHB 为 SystemJS 开发人员 Bedford 先生的出色工作干杯

【讨论】：