如何在浏览器中编译 TypeScript 代码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23075748/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to compile TypeScript code in the browser?
提问by klumsy
Is it possible to run the TypeScript compiler in the browser for transpiling TS to JS 100% in the browser. The use case would be implementing an online TypeScript IDE that runs 100% client side and it has a "Play" button to execute the project. So I need to transpile the project to JavaScript in order for the browser to execute the code.
是否可以在浏览器中运行 TypeScript 编译器，以便在浏览器中将 TS 100% 转译为 JS。用例将实现一个在线 TypeScript IDE，该 IDE 运行 100% 客户端，并且它有一个“播放”按钮来执行项目。所以我需要将项目转换为 JavaScript，以便浏览器执行代码。
I presume it should be as simpleas loading the relevant typescript JS files, creating an instance of the right class (compiler?) and calling a method or two.
我相信它应该是作为简单的加载相关的打字稿JS文件，创建正确的类的实例（编译器？），并调用一个或两个方法。
What would be the means suitable to load the Compiler in the browser? Where is the TypeScript Compiler API Reference Documentation ? Where should I start digging in ?
什么是适合在浏览器中加载编译器的方法？TypeScript 编译器 API 参考文档在哪里？我应该从哪里开始挖掘？
This isn't asking for any specific tool, but ANY way to do this with this particular computer language, and thus is on topic.
这不是要求任何特定工具，而是使用这种特定计算机语言执行此操作的任何方法，因此是主题。
采纳答案by basarat
You can use typescript-script: https://github.com/basarat/typescript-script
您可以使用typescript-script：https: //github.com/basarat/typescript-script
However do not do this in productionas it is going to be slow.
但是不要在生产中这样做，因为它会很慢。
You can use webpack (or a similar module bundler) to load npm packages in the browser.
您可以使用 webpack（或类似的模块打包器）在浏览器中加载 npm 包。
回答by Klesun
Transpiling ts to js is as simple as loading the typescriptServices.jsfile from typescript repo or npm, and using it's window.ts.transpile(tsCode)
将 ts 转换为 js 就像typescriptServices.js从 typescript repo或 npm加载文件一样简单，并使用它window.ts.transpile(tsCode)
<script src="https://klesun-misc.github.io/TypeScript/lib/typescriptServices.js"></script>
<script>
const tsCode = 'let num: number = 123;';
const jsCode = window.ts.transpile(tsCode);
document.write(jsCode);
</script>
Outputs:
输出：
var num = 123;
You can also pass the ts compiler optionsobject as second argument to ts.transpile()to specify whether output js should be es2020, es5, es6, and other stuff, though for meaning of values you'll likely have to dive intothe source code.
您还可以将ts 编译器选项对象作为第二个参数传递ts.transpile()给以指定输出 js 是否应为 es2020、es5、es6 和其他内容，但对于值的含义，您可能必须深入研究源代码。
Since this question got re-opened (just as planned >:D), I'm also re-posting my comment here.
由于这个问题被重新打开（正如计划的 >:D），我也在这里重新发布我的评论。
@basarat's solutionwas great; even though his lib is outdated and abandoned, it helped me a lot in writing another, full-fledged up-to-date lib with support for sub-dependencies: ts-browser
@basarat 的解决方案很棒；尽管他的库已经过时并被废弃了，但它对我编写另一个支持子依赖项的成熟的最新库有很大帮助：ts-browser
Usage: (given you provide explicit relative url in all your ts files)
用法：（假设您在所有 ts 文件中都提供了明确的相对 url）
<!-- index.html -->
<script type="module">
import {loadModule} from 'https://klesun.github.io/ts-browser/src/ts-browser.js';
loadModule('./index.ts').then(indexModule => {
return indexModule.default(document.getElementById('composeCont'));
});
</script>
// index.ts
import {makePanel} from './utils/SomeDomMaker'; // will implicitly use file with .ts extension
export default (composeCont) => {
composeCont.appendChild(makePanel());
};
