【问题标题】：Plunker with AngularJS and Typescript possible?可以使用 AngularJS 和 Typescript 进行 Plunker 吗？
【发布时间】：2014-02-28 14:52:41
【问题描述】：

我有一些关于 stackoverflow 的代码我想问一些问题。代码用 AngularJS 和 Typescript 编写，并对 $location.hash 进行操作和监视。我现在在 github 上有代码 https://github.com/svdoever/AngularJS-bookviewer。是否有可能在http://plnkr.co 上拥有这段代码，最好没有编译的 Typescript 文件？

我在https://twitter.com/filearts/status/290961349092208642 读到，Typescript 应该在http://plunkr.co 上得到支持。

编辑：

Bassarat 将 gh-pages 分支添加到 git 存储库的解决方案完成了这项工作。请参阅 cmets 的答案。

【问题讨论】：

只需点击推文上的链接，分叉 Plunk 并添加 Angular？
@Anzeo：如果您点击推文中的链接，您会发现打字稿代码不起作用。看起来打字稿代码从未编译过。

标签： javascript angularjs typescript plunker

【解决方案1】：

plunker 不支持它。但是当我需要第三方库支持（例如 angularjs）时，我倾向于使用http://typescript.io/。否则我只会坚持使用 TypeScript Playground http://www.typescriptlang.org/Playground/

更新

您可以使用https://github.com/basarat/typescript-script（plunker 示例：https://github.com/basarat/typescript-script#plunker）在任何您喜欢的地方使用 TypeScript

也就是说，许多 Playground 现在都支持 TypeScript，包括 plunkr：https://github.com/ggoodman/plunker-run-plugin/blob/master/README.md（只需将 "use typescript"; 放在文件顶部并添加 tsconfig.json 文件?

【讨论】：

您好 Basarat，问题是我需要多个文件。提到的两种解决方案都不支持该功能。我的案例是github.com/svdoever/AngularJS-bookviewer。我有很多关于这段代码的问题，但我不知道如何将它放在一个 Typescript/Html/Css 文件中。 GitHub 存储库和 Azure 上的实时运行站点是提出问题的最佳方式，还是您会建议另一种方法？
@SergevandenOever 结帐 github 页面：pages.github.com 您只需创建一个分支 gh-pages，您的 index.html 将自动在 svdoever.github.io/AngularJS-bookviewer 访问

【解决方案2】：

您可以使用TypeScript Compile 将您的 TypeScript 文件转换为 JavaScript。

像这样引用您的 TS 文件：

<script type="text/typescript" src="app.ts"></script>

并在HTML正文末尾添加这两个JS文件：

<script type="text/javascript" src="//niutech.github.io/typescript-compile/js/typescript.min.js"></script>
<script type="text/javascript" src="//niutech.github.io/typescript-compile/js/typescript.compile.js"></script>

Kos Prov 创建了一个可以工作的 TypeScript Plunker here。

更新

您可以使用SystemJS 加载 TypeScript 文件，但您需要手动引导 Angular。

http://plnkr.co/edit/kFsJ7q?p=preview

【讨论】：

TypeScript Compile 很久没有更新了
您的更新正是我想要的。. 将它分叉以设置基本 TS + Angular + Kendo Plunker：plnkr.co/edit/ixYVzt?p=preview。谢谢！

【解决方案3】：

改用https://stackblitz.com/，angular.io 上的所有实时示例现在都使用 stackblitz。

【讨论】：

【解决方案4】：

您可以使用 Cloud 9 或 Codio

https://c9.io

https://codio.com/

您可以从 github 克隆项目。

它就像一个 IDE，你会得到一个终端。它已安装节点。

我在 cloud 9 中测试过，但是 codio 类似你也可以使用它

你可以运行这个命令来安装打字稿

npm install -g typescript

然后你可以从终端编译你的 .ts 文件。

假设你有一个文件

hello.ts

你使用下面的命令编译它

tsc hello.ts

如果您在编译时遇到问题，请检查您的文件所在的目录。

【讨论】：

这与使用 Plunker 和 JavaScript 创建快速的网络原型无关。

【解决方案5】：

http://plnkr.co/edit/NqELPE?p=preview

这是我的同事编写的一个简单的 Hello World 应用，它使用 Typescript 和 Angular2

只需使用 Plunker 工具来包含软件包，它就可以正常工作：

<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script> <script src="https://jspm.io/system@0.16.js"></script> <script src="https://code.angularjs.org/2.0.0-alpha.25/angular2.dev.js"></script>

【讨论】：

不，这不会将 TypeScript 编译成 JavaScript。它具有预编译的文件，这些文件被简单地复制并粘贴到 plnkr 中。如果修改plnkr中的.ts文件，则.js文件不会更新。
不是问题的答案