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

Question

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

我认为它应该像加载相关的 typescript JS 文件、创建正确类的实例（编译器？）并调用一两个方法一样简单。

适合在浏览器中加载编译器的方法是什么？ TypeScript 编译器 API 参考文档在哪里？我应该从哪里开始挖掘？

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

Answer 1

您可以使用typescript-script : https://github.com/basarat/typescript-script

但是不要在生产环境中这样做，因为它会很慢。

您可以使用 webpack（或类似的模块捆绑器）在浏览器中加载 npm 包。

Answer 2

将 ts 转换为 js 就像从 typescript repo or npm 加载 typescriptServices.js 文件并使用它的 window.ts.transpile(tsCode) 一样简单

JSFiddle

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

输出：

var num = 123;

您还可以将 ts compiler options 对象作为第二个参数传递给 ts.transpile() 以指定输出 js 是否应该是 es2020、es5、es6 和其他内容，但对于值的含义，您可能必须 dive into源代码。

---

---

---

自从这个问题被重新打开（正如计划的那样>：D），我也在这里重新发布我的评论。

@basarat 的solution 很棒；即使他的库已经过时和被遗弃，它对我编写另一个支持子依赖的自给自足的现代库有很大帮助：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());
};