TypeScript ↔ JavaScript
用仓库内置的 typescript 编译器把 TS 转成 JS(可选 ES5/ES2015/ES2020/ESNext、CommonJS/ESM、是否移除注释),也能从 JS 启发式推断出 TS 骨架(参数与返回值标注 any、对象字面量生成 interface),并显示 TS 诊断的行列与消息。
浏览器本地运行所有计算都在你的浏览器里完成,数据不会离开本机。
输出
这个工具能做什么
- 把一段 TypeScript 快速转成可运行的 JavaScript:接口、类型标注、泛型参数会被擦除,代码结构原样保留。
- 给老环境降级语法:选 ES5 时箭头函数会变成 function、模板字符串会变成字符串拼接,选 CommonJS 时 import/export 会变成 require 与 exports。
- 反过来把一段 JS 变成 TS 骨架:参数和返回值先统一标注 any,对象字面量按属性生成 interface,之后自己把类型改精确。
- 用 TS 诊断定位语法错误:出错会显示「第 X 行第 Y 列 TS错误码: 说明」,比在浏览器里裸跑更快。
示例
输入
interface User { id: number; name: string }
const greet = (user: User, prefix = 'hi'): string => `${prefix} ${user.name}`;
export default greet;输出
const greet = (user, prefix = 'hi') => `${prefix} ${user.name}`;
export default greet;示例用的是默认设置(TS → JS、目标 ES2020、模块 ESNext):interface 被整体移除,参数与返回值的类型标注被擦除,其余代码逐字保留。换成 ES5 + CommonJS 会得到 function 与 exports.default 写法。首次转换需要先加载编译器,会稍等一下。
常见问题
这是类型检查吗?会不会报出我代码里的类型错误?
不是。转换走的是 transpileModule,只做语法转换,不读取其它文件、不做类型推断,所以「string 赋给了 number」这类类型错误不会报出来。它只提示语法级问题,比如括号没闭合。
JS → TS 推断出来的类型准确吗?
只是启发式骨架:参数和返回值统一标 any,对象字面量会生成 interface,数组按元素类型标成 string[] 之类,复杂结构给 unknown。它的价值是省掉手写类型的时间,之后必须自己细化和校对。
为什么箭头函数没有自动补返回值类型?
单参数箭头函数补上返回值会变成 (x): any => … 这种非法写法,所以工具主动跳过箭头函数的返回值标注,只在页面上提示。需要的话手动加就行。
转换会不会把我的代码发到服务器?
不会。TypeScript 编译器是随页面一起打包加载的,转换完全在浏览器里进行,代码不离开本机。代价是首次使用要等编译器加载完成。
支持哪些目标和模块格式?
目标是 ES5、ES2015、ES2020、ESNext,模块是 ESNext 和 CommonJS;还可以选择移除注释。转换只影响语法层面,不会做 polyfill,用了新 API 仍要自己引入。
关键词:typescriptjavascripttranspilets to jsjs to tscompileres5commonjs转换编译诊断