标题
[tsc/typescript.js/unpkg.com]如何在浏览器中编译 TypeScript 代码
clq
浏览(397) +
2023-02-14 15:14:24 发表
编辑
关键字:
如何在浏览器中编译 TypeScript 代码
我用的方法和它的不太一样，主要是得到 typescript 的浏览器版本的方法不同。
<!-- //第三方转换好的浏览器可用版本 npm 包 -->
<!-- <script src="https://unpkg.com/typescript@4.9.5/lib/typescript.js"></script> -->
<!-- //下面这个和上面的是一样的 -->
<script src="index_tsc_typescript.js"></script>
<script>
//使用方法来自 https://www.likecs.com/ask-8906941.html#sc=1144
//这里有另外一种方法，也是比较简单的，似乎更官方 https://github.com/basarat/typescript-script
//const tsCode = 'let num: number = 123;';
const tsCode = 'class crect{ left:string="aaa"; }; let num: number = 123;';
//const jsCode = window.ts.transpile(tsCode);
const jsCode = ts.transpile(tsCode);
document.write(jsCode);
</script>
<script>
//--------------------------------------------------------
//浏览器中使用 tsc/typescript //原理是 typescript 本身源码是可以编译成纯 js 的
/*
https://www.6hu.cc/archives/45816.html
baidu "浏览器安装 npm 包"
https://mp.weixin.qq.com/s?__biz=MzI2MzEwNTY3OQ==&mid=2648985262&idx=1&sn=2362bcc87a1027e80a49a6d6e3fc2fe4&chksm=f250134ec5279a58ba63da8f5ab335013e578374585d81eee3e87ad0c236bea389909b67217b&scene=27
根据以下文章其实可以有已经编译好的
https://blog.csdn.net/LuckyWinty/article/details/121759716
例如
https://unpkg.com/
https://unpkg.com/tsc
https://unpkg.com/typescript@4.9.5/lib/typescript.js
//index_tsc_typescript.js 即来自于此
//使用方法可参考
https://www.likecs.com/ask-8906941.html#sc=1144
*/
//--------------------------------------------------------
function AddLog(s)
{
document.getElementById("log").innerHTML = document.getElementById("log").innerHTML + "<br />" + s;
}//
function ClearLog(s)
{
document.getElementById("log").innerHTML = "";
}//
</script>
//--------------------------------------------------------
https://www.likecs.com/ask-8906941.html
原始地址应该是
https://stackoverflow.com/questions/23075748/how-to-compile-typescript-code-in-the-browser
【问题标题】：How to compile TypeScript code in the browser?如何在浏览器中编译 TypeScript 代码？
【发布时间】：2014-04-15 06:00:48
【问题描述】：
是否可以在浏览器中运行 TypeScript 编译器，以便在浏览器中将 TS 100% 转换为 JS。用例将实现一个运行 100% 客户端的在线 TypeScript IDE，它有一个“播放”按钮来执行项目。因此，我需要将项目转译为 JavaScript，以便浏览器执行代码。
我认为它应该像加载相关的 typescript JS 文件、创建正确类的实例（编译器？）并调用一两个方法一样简单。
适合在浏览器中加载编译器的方法是什么？ TypeScript 编译器 API 参考文档在哪里？我应该从哪里开始挖掘？
这不是要求任何特定的工具，而是使用这种特定的计算机语言执行此操作的任何方法，因此是主题。
【问题讨论】：
出于多种原因，但对于您通常不希望的生产代码来说是的。但是一些原因可能是在 typescriptlang.org 上构建一个类似的游乐场，或者构建一个 Web IDE，或者基于 Web 的编译器，或者可能是一个编译器，然后通过云服务将文件复制到服务器。在我的情况下，我只是在寻找一个简洁的例子，没有 TSC 的全部负担来编译单个文件。我的场景实际上不在浏览器中，而是在托管 Chakra JS 引擎的 PowerShell 脚本中，但最简单的方法是使用基于浏览器的简单脚本。
注释，因为 Q 已关闭：您正在 Typescript npm 包的默认导出模块上寻找 transpile() 方法。从'typescript'导入*作为TS； TS.transpile(sourceTS) -> 返回转译的 JS。 github.com/Microsoft/TypeScript/blob/master/lib/…
很遗憾，这么多有用的问题被关闭为题外话。您可能会询问字符串操作函数，只要它很简单，例如如何反转字符串。一旦它是一个像 transpile 这样的复杂函数，它就离题了。
这就是我所拥有的：浏览器中的打字稿游乐场cancerberosgx.github.io/typescript-in-the-browser/… BTW 我很遗憾你已经关闭了这个问题，因为这类问题虽然不正确，但却是少数几个地方之一初学者可以开始使用没有足够高级文档的编译器 API，但是，我希望。谢谢
我试图在这里回答这个问题：***.com/questions/46059313/…希望我们可以分享更多的经验，不要关闭那个也
标签： browser typescript
【解决方案1】：
您可以使用typescript-script : https://github.com/basarat/typescript-script
但是不要在生产环境中这样做，因为它会很慢。
您可以使用 webpack（或类似的模块捆绑器）在浏览器中加载 npm 包。
【讨论】：
为什么会不安全？
@DavidGiven 我不知道为什么我认为他将提供 TypeScript 用户输入。所以删除了。谢谢！
对于在浏览器中进行转译，您不需要做任何 hack - 只需在您的 html 文件中包含 node_modules/typescript.js 就可以让您使用 COMpiler API。这是一个在浏览器中 100% 转换为 js 的游乐场：cancerberosgx.github.io/typescript-in-the-browser/…
出于同样的原因，我昨晚将它重新写给了一个正在工作的up-to date lib。它现在还解决了import 依赖项。
哈哈，@ArturKlesun，我did the same thing！你的看起来更优雅（我完全不允许循环依赖），但你如何处理像lib.dom.d.ts 这样的库导入？你的也能像 js 一样拥有typescript embedded in the html 吗？太有趣了，我们相隔一周就一个一年多没有触及的话题做了这件事
【解决方案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());
};
【讨论】：
我找不到进行类型检查的编译器选项。 window.ts.transpile('let num : number= "1232";', {noEmitOnError: true, strict: true}) 但它不会失败
看起来 ts.transpile/ts.transpileModule 只进行编译而不进行类型检查 by design。 window.ts 中可能还有其他一些方法可以进行类型检查，但要找到这些方法需要 some research...
--------------------------------------------------------
//--------------------------------------------------------
typescript.d.ts 则来自于
https://raw.githubusercontent.com/microsoft/TypeScript/main/lib/typescript.d.ts
在电脑中搜索时发现 jsweet 中的代码库中也用到了它。
NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.
