Question

对于我的团队，我们介于项目之间，但我正在对TypeScript进行一些基础研究，以及如何使用Angular 1.x，考虑到Angular 2仍在烘焙。我通常使用Plunkr来制作小型原型，这样我们就可以在技术演示和原型中看到某些东西是如何工作的并且在原地混乱。

问题是，我试图在this plunker中设置一个非常基本的Angular 1.x + TS设置，但是一直遇到让它正常工作的问题。我认为一些问题是客户端的转换，但我确信这不是我弄乱的唯一问题。具体地说...

查看代码：

<!DOCTYPE html>
<html lang="en" ng-app="app">
  <head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  </head>

  <body>
    <div ng-controller="testController as ctrl">
      <h1>{{ ctrl.testMethod() }}</h1>
    </div>

    <!-- Scripts... -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script type="text/typescript" src="app.ts"></script>
    <script type="text/typescript" src="controllers.ts"></script>
    <script type="text/typescript" src="registrations.ts"></script>

    <!-- Required for web transpilation... -->
    <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>
  </body>
</html>

我从this StackOverflow question获得了客户端转换，但该问题的解决方案要么是'在Visual Studio中执行！'或者“转换你的TypeScript，然后将JavaScript插入Plunkr”，这对我不起作用，因为我的团队正在考虑首先转换到TypeScript - 我们需要能够使用typescript，因此原型可以帮助我们了解它的运作方式。此外，该问题还指出，蒸腾部分实际上已经过时了。

问题：首先，是否有一个更新的客户端TypeScript-to-JavaScript转换器，我可以链接到我的原型plunker？其次，有没有更好的资源可以参考如何让Angular 1与TypeScript一起工作？我已经非常幸运地找到了有关如何使TypeScript与Angular 1.x一起工作的任何事情......

Answer 1

编辑：事实证明你可以在plnkr上使用打字稿，我刚从下面的评论中学到了http://embed.plnkr.co/suu7Yg/preview

对于隐式模式，所有这些都需要创建一个具有相应扩展名的文件，即dt { float: left; text-align: right; width: 30%; padding-right:5px; } dd { width: 70%; margin: 0; }或script.ts，然后在头部引用预期的编译扩展名，即style.scss或script.js。很酷，plnkr！

~~我相当肯定Plunker不支持打字稿（当然我可能错了）~~（编辑：我错了，它不是很明显这是一个特色）。但是，我可以提供一个想法，以便找到你想要实现的目标。

尝试将您的小型原型和演示转移到codepen。它们都是我一直使用的非常类似的应用程序，而且codepen目前支持打字稿，所以如果你需要玩这些东西就得到它。

隐藏在小装备后面，外部js文件包括：

打开打字稿：

动臂。很高兴你的现场演示。希望有所帮助！

Answer 2

正如@wesww在修正后的回答中提到的，Plunker支持服务器端编译TypeScript。我的意思是，当你的TypeScript代码被发送到预览服务器时，它被发送为未转换的。

假设您有一个用TypeScript编写的文件script.ts，但项目的index.html请求script.js，Plunker的预览服务器将动态编译您的文件，提供编译版本。

您可以通过创建tsconfig.json文件（与常规CLI使用一致）来配置TypeScript编译器的工作方式，以定义您的设置。

有关详细信息，请参阅Definitive Guide to Comiplation on Plunker。

Answer 3

我不熟悉plunk，但是可以通过仅包含node_modules / typescript / typescript.js文件并使用Compiler API在浏览器中转换打字稿。在浏览器中检出我的Compiler API游乐场：https://cancerberosgx.github.io/typescript-in-the-browser/typescript-compiler/#example=tsTranspilingProject1

有关详情，请参见Dynamic execution of TypeScript in the browser

有没有办法让TypeScript在客户端的Plunkr中进行转换？

3 个答案: