如何使用 TypeScript 在线编译器
- 在编辑器中编写或粘贴 TypeScript，也可以从示例开始（点击重置示例即可恢复）。
- 点击运行，或使用 Ctrl + Enter（Mac 上为 ⌘ + Enter）。
- 您的代码会被编译为 JavaScript。如果编译器发现语法错误，会列出错误的
TS错误码、行号和列号，并且不会运行任何代码。 - 编译成功后，会运行生成的 JavaScript。
console.log的输出显示在输出面板中，您还可以展开编辑器下方的生成的 JavaScript，查看编译器生成的确切内容。 - 选择 5 秒、15 秒或 60 秒的时间限制，也可以点击停止提前结束运行。
首次运行时，页面会下载官方 TypeScript 编译器，大小约 3 MB。浏览器会将其缓存，因此之后的运行会很快启动。
编译和执行都在您浏览器的 Web Worker 中完成。您的代码不会被上传，也不会存储在我们的服务器上。编辑器只会把您最近的代码保存在浏览器的本地存储中，其他地方都不会保存。
支持哪些功能
本页使用 TypeScript 5.6，即 Microsoft 官方编译器。编译目标为 ES2022，结果由您浏览器的 JavaScript 引擎运行。
- 全部 TypeScript 语法：类型注解、接口、类型别名、泛型、联合类型和交叉类型、枚举、访问修饰符、
satisfies、as const等。 - 现代 JavaScript 输出，类、async/await 和可选链都会原样保留。
- 顶层
await、定时器和 Promise，与 JavaScript在线编译器相同。
限制：
- 仅转译。编译器会移除类型并报告语法错误，但不会执行完整的类型检查。像
const n: number = "text"这样的代码也能编译并运行。如果需要语义层面的类型错误，请使用tsc --noEmit或您的编辑器。 - 没有 DOM：代码在 worker 中运行，因此无法使用
document和window。 - 不支持导入：无法使用 npm 包、
import语句和 Node.js API。
TypeScript 速查
type Shape =
| { kind: "circle"; r: number }
| { kind: "rect"; w: number; h: number };
function area(s: Shape): number {
switch (s.kind) {
case "circle": return Math.PI * s.r ** 2;
case "rect": return s.w * s.h;
}
}
function first<T>(items: T[]): T | undefined {
return items[0];
}
const shapes: Shape[] = [{ kind: "circle", r: 1 }, { kind: "rect", w: 2, h: 3 }];
console.log(shapes.map(area)); // [3.141592653589793, 6]
console.log(first(shapes)?.kind);| 概念 | 语法 |
|---|---|
| 带类型的变量 | let count: number = 0; |
| 接口 | interface User { id: number; name?: string } |
| 联合类型 | type Id = string | number; |
| 泛型函数 | function wrap<T>(v: T): T[] { return [v]; } |
| 只读数组 | const xs: readonly number[] = [1, 2]; |
| 枚举 | enum Dir { Up, Down } |
小技巧
- 打开生成的 JavaScript，了解枚举、参数属性和类字段等特性是如何编译的。这是理解 TypeScript 在运行时做了什么的快捷方法。
- 请记住，类型在运行时会消失。要校验来自外部的数据（例如解析后的 JSON），请编写运行时检查或类型守卫，如
function isUser(x: unknown): x is User。 - 想在复制到项目之前整理输出结果？把它粘贴到 JavaScript格式化与压缩中即可。
提示：如果出现
TS1005: ';' expected 这样的错误，说明代码无法解析。请修复输出中显示的行和列，然后再次运行。常见问题
这里会检查我的类型吗？
不会。它使用编译器的转译模式，只报告语法错误。这样既快速又轻量，但不会报告类型不匹配。如需完整检查，请在本地运行 tsc，或使用带有 TypeScript 语言服务的编辑器。
TypeScript 和 JavaScript 有什么区别？
TypeScript 是带有可选静态类型的 JavaScript。浏览器无法直接运行 TypeScript，所以要先通过移除类型并降级少数 TypeScript 专有特性（如枚举）将其编译成普通 JavaScript。您可以在本页看到这一步的结果。
使用的是哪个 TypeScript 版本？
TypeScript 5.6，输出目标为 ES2022。
可以导入库吗？
不可以。每次运行只编译并执行单个文件，没有模块解析，因此不支持 import 语句和 npm 包。相关实用工具请查看我们的全部开发者工具。
更新于