3

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

但是，问题是我试图在这个 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>

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

问题：首先，是否有更新的客户端 TypeScript-to-JavaScript 转译器，我可以在我的原型 plunker 中链接到该转译器？其次，关于如何让 Angular 1 与 TypeScript 一起工作，是否有更好的资源可供参考？我很难找到任何关于如何使 TypeScript 与 Angular 1.x 一起工作的内容......

4

3 回答 3

2

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

对于隐式模式，这需要创建一个具有适当扩展名的文件，即script.tsor style.scss，然后在头部使用预期的编译扩展名引用它，即script.jsor style.css。非常酷，plnkr！

我相当肯定 Plunker 不支持打字稿（当然我可能是错的）（编辑：是的，我错了，这不是很明显这是一个功能）。但是，我可以为您要完成的工作提供一个可能的解决方案。

尝试将您的小型原型和演示移至 codepen。它们都是我一直在使用的相当可比的应用程序，并且 codepen 目前支持 typescript，所以如果你需要使用它，你就可以了。

它隐藏在小齿轮后面，外部js文件包括： 在此处输入图像描述

打开打字稿：

在此处输入图像描述

繁荣。很高兴参加您的现场演示。希望有帮助！

于 2015-11-04T18:59:49.493 回答
1

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

有关详细信息，请参阅在浏览器中动态执行 TypeScript

于 2018-10-25T03:46:51.963 回答
1

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

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

tsconfig.json您可以通过创建一个文件（与正常 CLI 使用一致）来定义您的设置来配置您希望 TypeScript 编译器如何工作。

有关更多信息，请参阅Plunker 上编译的权威指南。

于 2015-11-05T21:36:41.977 回答