如何在浏览器中编译TypeScript代码？

Question

是否可以在浏览器中运行 TypeScript 编译器，在浏览器中将 TS 100% 转译为 JS。该用例将实现一个在线 TypeScript IDE，它运行 100% 客户端，并且有一个“播放”按钮来执行项目。因此，我需要将项目转换为 JavaScript，以便浏览器执行代码。

我认为它应该像加载相关的 typescript JS 文件、创建正确类（编译器？）的实例并调用一个或两个方法一样“简单”。 在浏览器中加载编译器合适的方法是什么？ TypeScript 编译器 API 参考文档在哪里？我应该从哪里开始挖掘？

这并不要求任何特定的工具，而是使用这种特定的计算机语言来执行此操作的任何方法，因此是主题。

Answer 1

typescript-script

：

https://github.com/basarat/typescript-script

但是

不要在生产中这样做

，因为它会很慢。 您可以使用 webpack（或类似的模块捆绑器）在浏览器中加载 npm 包。

Answer 2

或 npm

加载

typescriptServices.js

文件一样简单，并使用它的 window.ts.transpile(tsCode)

JSFiddle

<script src="https://unpkg.com/typescript@latest/lib/typescript.js"></script>
<script>
const tsCode = 'let num: number = 123;';
const jsCode = window.ts.transpile(tsCode);
document.write(jsCode);
</script>

输出：

var num = 123;

您还可以将 

ts 编译器选项

对象作为第二个参数传递给 ts.transpile() 来指定输出 js 是否应该是 es2020、es5、es6 和其他内容，不过对于值的含义，您可能需要

深入了解

源代码。

---

---

由于这个问题被重新提出（正如计划>：D），我也在这里重新发布我的评论。

---

@basarat 的

解决方案

很棒；尽管他的库已经过时并被废弃，但它对我编写另一个支持子依赖项的自给自足的现代库有很大帮助：ts-browser 用法：（假设您在所有 ts 文件中使用相对路径）

<!-- 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());
};