TypeScript 格式化与 JavaScript 转译工具可以处理什么?
在浏览器中格式化 TypeScript,或将单个文件转译为 JavaScript。 Prettier TypeScript 格式化、TypeScript 编译器转译、四种 ECMAScript 目标版本、ES 模块与 CommonJS 输出。
转译不等于项目类型检查或打包
格式化适合代码维护;转译适合快速查看单文件生成结果。依赖解析、路径别名、声明文件、完整类型检查和生产打包仍应交给项目编译器和构建工具。
如何使用?
- 选择“格式化 TypeScript”整理源代码,或选择“转译为 JavaScript”移除类型并生成目标语法。
- 转译时选择 ECMAScript 目标版本,并选择 ES 模块或 CommonJS 输出。
- 粘贴一个不超过 2 MB 的 TypeScript 文件,运行后检查、复制或下载结果。
实际输入输出示例
移除类型声明并保留函数逻辑
输入
interface Tool { name: string; local: boolean }
const label = (tool: Tool): string => tool.local ? tool.name : `${tool.name} (API)`;输出
const label = (tool) => tool.local ? tool.name : `${tool.name} (API)`;转译会移除 interface 和类型注解,同时保留程序逻辑。目标版本会决定较新的 JavaScript 语法是否被降级。
常见错误与修复方法
| 现象 | 可能原因 | 修复方法 |
|---|---|---|
| 类型写错仍然生成了 JavaScript。 | 单文件转译不会执行整个项目的语义类型检查。 | 在真实项目配置和依赖下运行 tsc 或构建命令。 |
| 生成的代码运行时找不到导入内容。 | 转译不会解析、下载或打包外部依赖。 | 在项目自己的构建器中解析依赖并生成最终产物。 |
| 目标环境无法识别生成的语法或模块包装。 | 目标版本或模块格式与运行环境不匹配。 | 选择兼容的 ECMAScript 目标以及 ES 模块或 CommonJS。 |
重要行为说明
单文件转译不解析依赖,也不执行项目级语义类型检查;生成的 JavaScript 仍需在目标运行环境中测试。
标准与实现参考
- TypeScript Compiler API (opens in a new tab)说明 transpileModule 的单文件转译边界。
- TypeScript target 选项 (opens in a new tab)说明目标版本如何控制 JavaScript 语法降级。
- Prettier 浏览器文档 (opens in a new tab)说明浏览器独立模式和 TypeScript 插件。
关于TypeScript 格式化的常见问题
这个 TypeScript 工具会进行完整类型检查吗?
不会。浏览器中使用的是隔离的单文件转译;请在项目中运行 tsc 进行语义类型检查。
转译会上传我的代码吗?
不会。代码保留在当前标签页中,不会发送到 KitLumi 处理服务。
工具会执行输入代码吗?
不会。工具只格式化或生成 JavaScript 文本,不执行输入或输出。
更新记录
新增 TypeScript 格式化、单文件 JavaScript 转译、目标版本和模块格式选择,以及本地处理说明。 本次将编译放入 Worker,并增加加载状态和输入防抖。