TypeScript 在线演练场

此 TypeScript Playground 让您无需打开完整项目即可快速测试代码片段。它在浏览器中运行 TypeScript 编译器，显示带行号的类型检查诊断信息，输出 JavaScript，并可在沙盒控制台中运行简单输出。

此 TypeScript Playground 的功能

此工具专为日常 TypeScript 检查而设计：验证联合类型收窄、测试泛型辅助类型、比较编译器目标、确认 strict 模式行为，以及审查 TypeScript 输出的 JavaScript。它适用于学习、调试简洁示例、准备解答，或在将小型重构移入项目之前进行检查。

如何使用 TypeScript 编译器

1. 将 TypeScript 粘贴到编辑器中或选择一个快速示例。
2. 选择 JavaScript 目标和模块格式。
3. 如需更严格的诊断，请启用 strict 模式和可选的索引访问检查。
4. 点击编译并进行类型检查，或保持自动编译启用以获得实时反馈。
5. 查看诊断信息、检查输出的 JavaScript，然后在沙盒控制台中运行简单的代码片段。

类型检查注意事项

浏览器编译器对常见 JavaScript 对象（如数组、字符串、记录、JSON、console 和定时器）使用紧凑的内置声明文件。这使得 playground 在处理代码片段时保持快速且自包含。如果您的代码依赖于 React、Node.js、DOM API 或特定包的声明，请在项目内使用真实的 tsconfig.json 和已安装的类型包来确认最终结果。

示例与使用场景

当您想从较大的代码库中隔离类型错误、比较 strict 模式如何改变诊断、向队友解释 TypeScript 概念，或检查小型代码片段如何编译为 JavaScript 时，请使用此 playground。内置示例涵盖可辨识联合、泛型记录辅助函数、satisfies 运算符和有意的类型错误，让您能同时看到正常和失败的编译器状态。

• 在将联合类型添加到 API 响应模型之前对其进行验证。
• 测试泛型辅助函数，无需等待完整应用构建。
• 在更改目标或模块选项时检查输出的 JavaScript。
• 分享 TypeScript 诊断的简洁复现。

常见问题

此工具会检查 TypeScript 类型吗？

是的。它会在浏览器中构建 TypeScript 程序，并报告来自编译器的诊断信息，包括类型错误、语法错误和编译器选项消息。

我可以更改 TypeScript 编译器选项吗？

是的。主要控件涵盖 JavaScript 目标、模块输出、strict 模式、声明文件输出和 noUncheckedIndexedAccess。

为什么缺少某个库类型？

此 playground 有意使用紧凑的内置类型库。对于框架、DOM、Node.js 或 npm 包的类型，请使用您的本地项目设置。

JavaScript 运行器安全吗？

运行器使用沙盒化的 iframe 来运行简短代码片段。请避免运行不受信任的代码，并在您的常规开发环境中测试真实的应用代码。