สนามทดลอง 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 ที่คอมไพล์แล้วเพื่อดูผลลัพธ์ console ที่นี่'; }); 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', 'compiler พร้อมใช้งาน'); compileNow(); return; } if (attempt > 80) { compilerStateEl.textContent = 'compiler ไม่พร้อมใช้งาน'; setStatus('error', 'compiler ไม่พร้อมใช้งาน'); diagnosticsEl.innerHTML = '
'; return; } setTimeout(function () { waitForCompiler(attempt + 1); }, 150); } waitForCompiler(0); })();
ตัวบล็อกโฆษณาของคุณทำให้เราแสดงโฆษณาไม่ได้
MiniWebtool ให้ใช้ฟรีได้เพราะมีโฆษณา หากเครื่องมือนี้ช่วยคุณได้ โปรดสนับสนุนเราด้วยการอัปเกรดเพื่อใช้งานแบบไม่มีโฆษณาและใช้ได้มากขึ้นต่อวัน หรืออนุญาต MiniWebtool.com แล้วโหลดใหม่
TypeScript Playground นี้ช่วยให้คุณทดสอบ snippet ได้อย่างรวดเร็วโดยไม่ต้องเปิดโปรเจกต์เต็มรูปแบบ โดยจะรัน compiler ของ TypeScript ในเบราว์เซอร์ของคุณ แสดงการวินิจฉัยการตรวจสอบ type พร้อมหมายเลขบรรทัด ส่งออก JavaScript และสามารถรันผลลัพธ์อย่างง่ายใน console แบบ sandbox ได้
เครื่องมือนี้ออกแบบมาสำหรับการตรวจสอบ TypeScript ในชีวิตประจำวัน ได้แก่ การตรวจสอบการทำ union narrowing การทดสอบ type ของ helper แบบ generic การเปรียบเทียบ target ของ compiler การยืนยันพฤติกรรมของ strict mode และการตรวจสอบ JavaScript ที่ TypeScript ส่งออกมา เหมาะสำหรับการเรียนรู้ การ debug ตัวอย่างขนาดเล็ก การเตรียมคำตอบ หรือการตรวจสอบการ refactor เล็ก ๆ ก่อนที่จะนำไปใส่ในโปรเจกต์
compiler ในเบราว์เซอร์ใช้ไฟล์ declaration ในตัวที่กระชับสำหรับออบเจ็กต์ JavaScript ทั่วไป เช่น array, string, record, JSON, console และ timer ซึ่งทำให้ playground รวดเร็วและพอเพียงในตัวเองสำหรับ snippet หากโค้ดของคุณพึ่งพา React, Node.js, DOM API หรือ declaration เฉพาะแพ็กเกจ ให้ยืนยันผลลัพธ์สุดท้ายภายในโปรเจกต์ของคุณด้วย tsconfig.json จริงและแพ็กเกจ type ที่ติดตั้งไว้
ใช้ playground เมื่อคุณต้องการแยกข้อผิดพลาดด้าน type ออกจาก codebase ขนาดใหญ่ เปรียบเทียบว่า strict mode เปลี่ยนการวินิจฉัยอย่างไร อธิบายแนวคิดของ TypeScript ให้เพื่อนร่วมทีมฟัง หรือตรวจสอบว่า snippet เล็ก ๆ คอมไพล์เป็น JavaScript อย่างไร ตัวอย่างในตัวครอบคลุม discriminated union, helper ของ record แบบ generic, ตัวดำเนินการ satisfies และข้อผิดพลาดด้าน type ที่จงใจใส่ไว้ เพื่อให้คุณเห็นทั้งสถานะที่สะอาดและล้มเหลวของ compiler
ใช่ เครื่องมือนี้สร้างโปรแกรม TypeScript ภายในเบราว์เซอร์และรายงานการวินิจฉัยจาก compiler รวมถึงข้อผิดพลาดด้าน type ข้อผิดพลาดด้าน syntax และข้อความเกี่ยวกับตัวเลือกของ compiler
ได้ ตัวควบคุมหลักครอบคลุม target ของ JavaScript, ผลลัพธ์ของ module, strict mode, การส่งออก declaration และ noUncheckedIndexedAccess
playground นี้ตั้งใจใช้ไลบรารี type ในตัวที่กระชับ สำหรับ type ของ framework, DOM, Node.js หรือแพ็กเกจ npm ให้ใช้การตั้งค่าของโปรเจกต์ในเครื่องของคุณ
ตัวรันใช้ iframe แบบ sandbox สำหรับ snippet ที่รวดเร็ว หลีกเลี่ยงการรันโค้ดที่ไม่น่าเชื่อถือ และทดสอบโค้ดแอปจริงภายในสภาพแวดล้อมการพัฒนาปกติของคุณ
อ้างอิงเนื้อหา หน้าหรือเครื่องมือนี้ว่า:
"สนามทดลอง TypeScript" ที่ https://MiniWebtool.com/th/สนามทดลอง-typescript/ จาก MiniWebtool, https://MiniWebtool.com/
by miniwebtool team. Updated: 2026-05-23
MiniWebtool
หากคุณชอบ สนามทดลอง TypeScript โปรดลองเชื่อมโยงเครื่องมือนี้โดยคัดลอก/วางรหัสต่อไปนี้: