TypeScript 在线演练场
在浏览器中编写、编译、类型检查和运行 TypeScript,支持实时诊断、JavaScript 输出、严格模式控制、快速示例以及沙盒控制台。
在浏览器中编写、编译、类型检查和运行 TypeScript,支持实时诊断、JavaScript 输出、严格模式控制、快速示例以及沙盒控制台。
'; updateStage('run', false); runnerEl.srcdoc = sandboxHtml; } function downloadJavaScript() { const blob = new Blob([jsOutputEl.value], { type: 'text/javascript;charset=utf-8' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'playground.js'; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); } function tidyIndents() { const tidied = sourceEl.value .replace(/\t/g, ' ') .split('\n') .map(function (line) { return line.replace(/\s+$/g, ''); }) .join('\n') .replace(/\n{4,}/g, '\n\n\n'); sourceEl.value = tidied; compileNow(); } function resetSource() { sourceEl.value = document.getElementById('tsplay-source').defaultValue; compileNow(); } sourceEl.addEventListener('input', scheduleCompile); sourceEl.addEventListener('scroll', function () { linesEl.scrollTop = sourceEl.scrollTop; }); sourceEl.addEventListener('keydown', function (event) { if (event.key === 'Tab') { event.preventDefault(); const start = sourceEl.selectionStart; const end = sourceEl.selectionEnd; sourceEl.value = sourceEl.value.slice(0, start) + ' ' + sourceEl.value.slice(end); sourceEl.selectionStart = sourceEl.selectionEnd = start + 2; scheduleCompile(); } }); document.querySelectorAll('[data-example]').forEach(function (button) { button.addEventListener('click', function () { const name = button.getAttribute('data-example'); if (EXAMPLES[name]) { sourceEl.value = EXAMPLES[name]; compileNow(); } }); }); document.querySelectorAll('.tsplay-result .tsplay-tab').forEach(function (tab) { tab.addEventListener('click', function () { setActiveTab(tab.getAttribute('data-tab')); }); }); [targetEl, moduleEl, strictEl, indexedEl, declarationsEl].forEach(function (control) { control.addEventListener('change', compileNow); }); compileBtn.addEventListener('click', compileNow); runBtn.addEventListener('click', runJavaScript); document.getElementById('tsplay-copy-source').addEventListener('click', function () { copyText(sourceEl.value, 'TypeScript'); }); document.getElementById('tsplay-copy-js').addEventListener('click', function () { copyText(jsOutputEl.value, 'JavaScript'); }); document.getElementById('tsplay-download-js').addEventListener('click', downloadJavaScript); document.getElementById('tsplay-format-btn').addEventListener('click', tidyIndents); document.getElementById('tsplay-clear-console').addEventListener('click', function () { consoleEl.textContent = '运行编译后的 JavaScript 即可在此处查看控制台输出。'; }); document.getElementById('tsplay-clear-btn').addEventListener('click', resetSource); window.addEventListener('message', function (event) { if (!event.data || event.data.tsplayToken !== runnerToken) { return; } addConsoleLine(event.data.kind, event.data.value); }); function waitForCompiler(attempt) { syncEditorStats(); if (window.ts) { compilerStateEl.textContent = 'TypeScript ' + window.ts.version + ' 就绪'; setStatus('ready', '编译器就绪'); compileNow(); return; } if (attempt > 80) { compilerStateEl.textContent = '编译器不可用'; setStatus('error', '编译器不可用'); diagnosticsEl.innerHTML = '
'; return; } setTimeout(function () { waitForCompiler(attempt + 1); }, 150); } waitForCompiler(0); })();
你的广告拦截器导致我们无法展示广告
MiniWebtool 依靠广告收入免费提供服务。如果这个工具帮到了你,欢迎升级获得无广告浏览和更多每日使用次数,或将 MiniWebtool.com 加入白名单后刷新页面。
此 TypeScript Playground 让您无需打开完整项目即可快速测试代码片段。它在浏览器中运行 TypeScript 编译器,显示带行号的类型检查诊断信息,输出 JavaScript,并可在沙盒控制台中运行简单输出。
此工具专为日常 TypeScript 检查而设计:验证联合类型收窄、测试泛型辅助类型、比较编译器目标、确认 strict 模式行为,以及审查 TypeScript 输出的 JavaScript。它适用于学习、调试简洁示例、准备解答,或在将小型重构移入项目之前进行检查。
浏览器编译器对常见 JavaScript 对象(如数组、字符串、记录、JSON、console 和定时器)使用紧凑的内置声明文件。这使得 playground 在处理代码片段时保持快速且自包含。如果您的代码依赖于 React、Node.js、DOM API 或特定包的声明,请在项目内使用真实的 tsconfig.json 和已安装的类型包来确认最终结果。
当您想从较大的代码库中隔离类型错误、比较 strict 模式如何改变诊断、向队友解释 TypeScript 概念,或检查小型代码片段如何编译为 JavaScript 时,请使用此 playground。内置示例涵盖可辨识联合、泛型记录辅助函数、satisfies 运算符和有意的类型错误,让您能同时看到正常和失败的编译器状态。
是的。它会在浏览器中构建 TypeScript 程序,并报告来自编译器的诊断信息,包括类型错误、语法错误和编译器选项消息。
是的。主要控件涵盖 JavaScript 目标、模块输出、strict 模式、声明文件输出和 noUncheckedIndexedAccess。
此 playground 有意使用紧凑的内置类型库。对于框架、DOM、Node.js 或 npm 包的类型,请使用您的本地项目设置。
运行器使用沙盒化的 iframe 来运行简短代码片段。请避免运行不受信任的代码,并在您的常规开发环境中测试真实的应用代码。
引用此内容、页面或工具为:
"TypeScript 在线演练场" 于 https://MiniWebtool.com/zh-cn/typescript-在线演练场/,来自 MiniWebtool,https://MiniWebtool.com/
by miniwebtool team. Updated: 2026-05-23