有没有办法让TypeScript在客户端的Plunkr中进行转换？
[英]Is there a way to get TypeScript to transpile in Plunkr on the client side?
问题描述
For my team, we're between projects, but I'm performing some basic research on TypeScript and how to use Angular 1.x with it, considering that Angular 2 is still being baked. 
对于我的团队，我们介于项目之间，但我正在对TypeScript进行一些基础研究，以及如何使用Angular 1.x，考虑到Angular 2仍在被烘焙。 I usually use Plunkr to make small-scale prototypes so that we can see how something works and mess with it in-situ during tech demos and stuff. 我通常使用Plunkr来制作小型原型，这样我们就可以在技术演示和过程中看到某些东西是如何工作的并且在原地混乱。
The problem, though, is I tried to make a very basic Angular 1.x + TS setup in this plunker , but have been running into issues getting it to work properly. 但问题是，我试图在这个plunker中设置一个非常基本的Angular 1.x + TS设置，但是遇到了让它正常工作的问题。 I think some of the problem is the client-side transpilation, but I'm sure that's not the only thing I'm messing up. 我认为一些问题是客户端的转换，但我确信这不是我弄乱的唯一问题。 Specifically... 特别...
View Code: 查看代码：
<!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>
I got the client-side transpilation from this StackOverflow question , but that question's resolution was either, 'Just do it in Visual Studio!' 我从这个StackOverflow问题得到了客户端的转换，但是这个问题的解决方案要么是“只是在Visual Studio中做！” or 'transpile your TypeScript, then plug the JavaScript into Plunkr,' which doesn't work for me, because my team is considering transitioning to TypeScript in the first place - we need to be able to work with typescript, thus the prototype to help us understand how it works. 或者“转换你的TypeScript，然后将JavaScript插入Plunkr”，这对我不起作用，因为我的团队正在考虑首先转换到TypeScript - 我们需要能够使用typescript，因此原型可以帮助我们了解它的运作方式。 Additionally, that question notes that the transpilation parts are actually significantly outdated. 此外，该问题还指出，蒸腾部分实际上已经过时了。
Question: First, is there an updated clientside TypeScript-to-JavaScript transpiler that I can link to in my prototype plunker? 问题：首先，是否有一个更新的客户端TypeScript-to-JavaScript转换器，我可以链接到我的原型plunker？ Second, are there any better resources to refer to on how to get Angular 1 to work with TypeScript? 其次，有没有更好的资源可以参考如何让Angular 1与TypeScript一起工作？ I've had very, very little luck finding anything that talks about how to make TypeScript work with Angular 1.x... 我很幸运地找到了有关如何使TypeScript与Angular 1.x一起工作的任何事情......
3 个解决方案
解决方案1
2 2015-11-04 18:59:49
Edit: Turns out you can use typescript on plnkr, which I just learned from the comments below http://embed.plnkr.co/suu7Yg/preview 编辑：事实证明你可以在plnkr上使用打字稿，我刚从下面的评论中学到了http://embed.plnkr.co/suu7Yg/preview
For implicit mode all this requires is creating a file with the appropriate extension, ie script.ts or style.scss , and then referencing it in the head with the expected compiled extension, ie script.js or style.css . 对于隐式模式，所有这些都需要创建一个具有相应扩展名的文件，即script.ts或style.scss ，然后在头部引用预期的编译扩展名，即script.js或style.css 。 Very cool, plnkr! 非常酷，plnkr！
I'm fairly certain Plunker doesn't support typescript (though of course I could be wrong) (edit: yup I was wrong, it's just not obvious that this is a feature). 我相当肯定Plunker不支持打字稿（虽然我当然可能是错的） （编辑：是的我错了，这是一个特征并不明显）。 However, I can offer an idea for a possible solution of what you're trying to accomplish. 但是，我可以为您想要实现的目标提供一个可能的解决方案。
Try moving your small-scale prototypes and demos over to codepen instead. 尝试将您的小型原型和演示转移到codepen。 They're both pretty comparable apps I use all the time, and codepen currently supports typescript so if that's something you need to play with you got it. 它们都是我一直使用的非常类似的应用程序，而且codepen目前支持打字稿，所以如果你需要玩这些东西就得到它。
It's hidden behind the little gear, along with external js file includes: 它隐藏在小齿轮后面，外部js文件包括：
Turn on typescript: 打开打字稿：
Boom. 繁荣。 Good to go for your live demos. 很高兴你的现场演示。 Hope that helps! 希望有所帮助！
解决方案2
1 2015-11-05 21:36:41
As mentioned by @wesww in his amended answer, Plunker supports server-side compilation of TypeScript. 正如@wesww在其修正的答案中所提到的，Plunker支持TypeScript的服务器端编译。 What I mean by that is that when your TypeScript code is sent to the preview server, it is sent un-transformed. 我的意思是，当你的TypeScript代码被发送到预览服务器时，它被发送为未转换的。
Suppose you have a file script.ts , written in TypeScript, but the index.html of your project requests script.js , Plunker's preview server will compile your file on the fly and serve the compiled version. 假设您有一个用TypeScript编写的文件script.ts ，但项目的index.html请求script.js ，Plunker的预览服务器将动态编译您的文件并提供编译版本。
You can configure how you want the TypeScript compiler to work by creating a tsconfig.json file (consistent with normal CLI usage) to define your settings. 您可以通过创建tsconfig.json文件（与常规CLI使用一致）来配置TypeScript编译器的工作方式，以定义您的设置。
Please see Definitive Guide to Comiplation on Plunker for more information. 有关更多信息，请参阅关于Plunker的Comiplation的权威指南 。
解决方案3
1 2018-10-25 03:46:51
I'm not familiar with plunk is but it's possible to transpile typescript in the browser by just including node_modules/typescript/typescript.js file and use the Compiler API. 我不熟悉plunk，但是可以通过包含node_modules / typescript / typescript.js文件并使用编译器API在浏览器中转换typescript。 Checkout my Compiler API playground in the browser: https://cancerberosgx.github.io/typescript-in-the-browser/typescript-compiler/#example=tsTranspilingProject1 在浏览器中查看我的编译器API操场： https ： //cancerberosgx.github.io/typescript-in-the-browser/typescript-compiler/#example=tsTranspilingProject1
See Dynamic execution of TypeScript in the browser for details 有关详细信息，请参阅浏览器中的TypeScript动态执行
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.