在线运行 TypeScript 代码 - 免安装浏览器 TS 运行器

在线运行 TypeScript

在浏览器里直接写 TypeScript 并运行，无需 npm 与编译配置

代码

// 欢迎使用浏览器内 TypeScript 运行器
// 类型标注会在运行前被剥掉，代码最终以 JavaScript 执行

interface User {
  name: string;
  age: number;
  email?: string;      // 可选属性
}

function greet(user: User, greeting: string = "你好"): string {
  return `${greeting}，${user.name}！`;
}

const users: User[] = [
  { name: "小明", age: 18, email: "xm@example.com" },
  { name: "小红", age: 22 },
];

for (const u of users) {
  console.log(greet(u));
  console.log("  邮箱:", u.email ?? "（未填写）");
}

// 只读数组与元组
const scores: readonly number[] = [88, 92, 76];
const pair: [string, number] = ["总分", scores.reduce((a, b) => a + b, 0)];
console.log(`${pair[0]}: ${pair[1]}，平均: ${(pair[1] / scores.length).toFixed(1)}`);

运行结果

这是什么？

在浏览器里直接写 TypeScript 并运行。类型标注会在执行前被剥离，剩下的 JavaScript 交给浏览器原生执行。转译器只有约 208KB，比完整的 TypeScript 编译器（8.7MB）小得多，所以加载很快。

重要：这里只做转译，不做类型检查。 类型写错、拼错属性名、参数个数不对，都不会报错，代码照常运行（错误可能在运行到那一行时才以 JavaScript 异常的形式暴露）。如果需要完整的类型检查与报错提示，请在本机使用 tsc 或编辑器的 TypeScript 支持。

怎么用？

像写普通 TypeScript 一样写代码，接口、泛型、枚举都支持；
用 console.log() 输出，结果显示在右侧；
点「运行」或按 Ctrl+Enter。

支持能力对照

能力	是否支持	说明
类型标注 / 接口 / 类型别名	支持	执行前统一剥离
泛型、联合类型、类型收窄	支持	语法层面支持，不做类型验证
枚举 enum	支持	会被转译成对应的 JavaScript 对象
类与访问修饰符	支持	public / private / protected 会被转译
类型检查与报错	不支持	只转译不检查，类型错误不会被指出
import / export	不支持	单文件运行环境，没有模块解析能力
tsconfig.json / JSX	不支持	无项目配置能力
长时间运行	限 10 秒	超时自动终止

常见问题

为什么我类型写错了却不报错？

因为这里用的是转译器而不是编译器。转译器只负责把类型标注删掉变成可执行的 JavaScript，不分析类型是否正确。这是为了让浏览器端加载体积从 8.7MB 降到 208KB 所做的取舍 —— 完整的类型检查请在本机用 tsc。

可以写 import 吗？

不可以。这是单文件运行环境，没有模块解析器。把代码写在一个文件里即可。

和 JavaScript 运行器有什么区别？

代码最终都以 JavaScript 执行，区别只在于本页面会先用转译器剥掉类型标注。如果不需要类型语法，用 JavaScript 运行器可以少下载 208KB。