TS

TypeScript 转 JS 预览器

左侧粘贴 TypeScript,浏览器内调用官方 tsc 编译器实时转译为 JavaScript:看清类型擦除、泛型与枚举编译后的真实产物,报错逐条列出,代码不出本机。

编译器:待加载
TypeScript 源码
编译结果 JavaScript
// 编译结果将显示在这里

代码片段预设(8 个)

点选即载入源码并立即编译,观察不同类型语法擦除后的真实产物。

三目标产物规模(自绘 SVG)

同一份源码分别按 ES5 / ES2015 / ES2020 转译,对比产物字符数与行数。

诊断报告(逐项级别 + 修复建议)

编译器报错按行列定位;另附静态检查(显式 any、类型断言、非空断言、@ts-ignore)提示,供迁移前排查。

编译后这里会逐项列出问题、严重级别与修复建议。

方案管理 · 数值对比 · 导出

调好的参数可存成方案随时载入,也能生成可分享链接;结果里的数值列会自动画成对比图,并支持导出 CSV / JSON。

最近方案 暂无

🔶口径说明与常见误填

看清擦除与降级产物,再决定构建配置。

类型擦除
类型注解、interface、type 别名编译后整行消失,运行时 JS 不含任何类型信息;类型只活在编译期。
enum 产物
普通 enum 编译成双向映射对象(正查反查都有);const enum 会被内联,跨文件场景注意行为差异。
namespace 产物
namespace 编译为 IIFE + 对象挂载,这也是现代项目更推荐 ESM import/export 的原因。
目标版本
切 ES5 / ES2015 / ES2020:箭头函数、class、模板字符串等按目标降级,产物差异一目了然。
校验口径
本页用官方 transpileModule 单文件转译:语法错误会列出,但跨文件类型检查请以本地 tsc 为准。

这个工具解决什么问题

学 TS 最难建立的是「类型编译后就没了」的直觉。本页粘贴 TypeScript,浏览器内调用微软官方 tsc 编译器实时转译:左侧 TS、右侧 JS 同屏对照,直观看到类型擦除、enum 展开、语法降级的真实产物,编译报错逐条列出,可选 ES5/ES2015/ES2020 目标,支持下载 .js,代码全程不出本机。

三条看产物铁律

① 别指望运行时校验:类型擦除后外部数据不再受保护,接口返回值仍要手写校验;对照一次产物就明白 zod 为什么流行。

② 降级看目标再评估:要兼容老环境就把目标切 ES5 看产物膨胀程度,本页对照比盲猜构建配置可靠。

③ 报错先修语法再看类型:诊断区列出的错误先处理语法级问题;单文件模式下的类型告警以本地 tsc 结果为准。

怎么用

  1. 第 1 步 · 粘贴 TypeScript 代码
    左侧源码区贴入 ts 代码,或点「载入示例」看 interface 与泛型的典型写法。
  2. 第 2 步 · 选择编译目标
    右侧头部「目标」下拉选 ES2020 / ES2015 / ES5,切换即重新转译。
  3. 第 3 步 · 点「立即编译」看对照
    右侧输出 JS 产物,下方诊断区逐条列出错误与行列号。
  4. 第 4 步 · 复制或下载 JS
    「复制 JS」带走产物,「下载 .js」保存文件;首次使用需联网加载编译器。

更新记录

  • v1.0 2026-11-02
  • 2026-11-02 上线首个版本
  • 2026-11-02 完善结果展示

常见问题

有 ts 在线转 js 工具吗?
本页即在线版:加载的是微软官方 TypeScript 编译器(transpileModule 模式),与本地 tsc 产物一致,代码全程留在浏览器不上传。
typescript 编译后的 js 长什么样?
类型注解、interface、type 别名会被整行擦除,运行时只剩值语句;enum 会编译成双向映射对象,namespace 变 IIFE。左侧写 TS 右侧即时对照。
ts 的类型会被编译掉吗?
会。类型系统只存在于编译期,产物 JS 不含任何类型信息,这也是 TS 运行时仍需校验外部数据的原因。擦除后行为与手写 JS 完全一致。
能在线运行 typescript 吗?
本页做编译预览而非执行;如需跑结果,复制生成的 JS 粘贴到浏览器控制台即可。首次编译需联网加载编译器(约几 MB,之后走缓存)。
有 ts 转 es5 代码工具吗?
把右上「目标」切到 ES5:箭头函数、class、模板字符串等会一并降级,可直观评估老环境迁移成本;ES2015 / ES2020 同理。

💬 留言板 0

全部留言需审核通过后展示
💬

还没有留言,来抢沙发吧!

✍️ 说点什么
0 / 500
图形验证码
👣 做完这一步,顺便看看
🏛️ 凯撒密码解密 凯撒密码解密 :1~25 位位移加解密、ROT13 一键转换… → 🔤 乱码转换器在线修复 乱码转换器在线 :把“锟斤拷”“�”“涓枃”“😀”等乱… → 📸 代码截图美化工具 在线代码转图片工具:粘贴或输入代码(支持 JavaScrip… → 🎨 WCAG 对比度检测工具 在线颜色对比度检测工具:输入前景文字色与背景色(支持 #he… →
全部工具 →