如何编译打字稿代码在浏览器？

Question

是否有可能运行在浏览器中打字稿编译器在浏览器transpiling TS到JS 100%.用例将实现运行100%的客户端在线打字稿IDE,它有一个"播放"按钮执行该项目.所以我需要将项目转换为JavaScript,以便浏览器执行代码.

我相信它应该是作为简单的加载相关的打字稿JS文件,创建正确的类的实例(编译器？),并调用一个或两个方法.

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

这不要求任何特定的工具,但是任何方式与这个特定的计算机语言要做到这一点,因而在题目.

Answer 1

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

但是不要在生产中做到这一点,因为它将会是缓慢的.

您可以使用browserify加载NPM包在浏览器中.

Answer 2

将 ts 转换为 js 就像typescriptServices.js从 typescript repo或 npm加载文件一样简单，并使用它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 编译器选项对象作为第二个参数传递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());
};