Sân chơi TypeScript
Viết, biên dịch, kiểm tra kiểu dữ liệu và chạy TypeScript trong trình duyệt của bạn với chẩn đoán trực tiếp, đầu ra JavaScript, kiểm soát chế độ nghiêm ngặt (strict mode), các ví dụ nhanh và bảng điều khiển sandbox.
Viết, biên dịch, kiểm tra kiểu dữ liệu và chạy TypeScript trong trình duyệt của bạn với chẩn đoán trực tiếp, đầu ra JavaScript, kiểm soát chế độ nghiêm ngặt (strict mode), các ví dụ nhanh và bảng điều khiển sandbox.
'; 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 = 'Chạy JavaScript đã biên dịch để xem đầu ra console tại đây.'; }); 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 + ' sẵn sàng'; setStatus('ready', 'Compiler đã sẵn sàng'); compileNow(); return; } if (attempt > 80) { compilerStateEl.textContent = 'Compiler không khả dụng'; setStatus('error', 'Compiler không khả dụng'); diagnosticsEl.innerHTML = '
'; return; } setTimeout(function () { waitForCompiler(attempt + 1); }, 150); } waitForCompiler(0); })();
Trình chặn quảng cáo đang ngăn chúng tôi hiển thị quảng cáo
MiniWebtool miễn phí nhờ quảng cáo. Nếu công cụ này hữu ích với bạn, hãy ủng hộ chúng tôi bằng cách nâng cấp để duyệt không quảng cáo và có nhiều lượt dùng mỗi ngày hơn, hoặc cho phép MiniWebtool.com rồi tải lại.
TypeScript Playground này cho phép bạn kiểm tra một đoạn mã nhanh chóng mà không cần mở một dự án đầy đủ. Nó chạy compiler của TypeScript trong trình duyệt của bạn, hiển thị chẩn đoán kiểm tra type kèm số dòng, phát ra JavaScript và có thể chạy đầu ra đơn giản trong một console sandbox.
Công cụ này được thiết kế cho các kiểm tra TypeScript hằng ngày: xác thực thu hẹp union, kiểm tra các type helper generic, so sánh các target của compiler, xác nhận hành vi strict mode và xem xét JavaScript mà TypeScript phát ra. Nó hữu ích cho việc học, gỡ lỗi một ví dụ ngắn gọn, chuẩn bị một câu trả lời, hoặc kiểm tra một bản refactor nhỏ trước khi đưa nó vào dự án.
Compiler trong trình duyệt sử dụng một tệp declaration tích hợp gọn nhẹ cho các đối tượng JavaScript phổ biến như mảng, chuỗi, record, JSON, console và timer. Điều đó giữ cho playground nhanh và tự chứa cho các đoạn mã. Nếu mã của bạn phụ thuộc vào React, Node.js, các DOM API hoặc các declaration đặc thù của gói, hãy xác nhận kết quả cuối cùng bên trong dự án của bạn với tsconfig.json thực sự và các gói type đã cài đặt.
Sử dụng playground khi bạn muốn cô lập một lỗi type khỏi một codebase lớn hơn, so sánh cách strict mode thay đổi chẩn đoán, giải thích một khái niệm TypeScript cho đồng đội, hoặc kiểm tra cách một đoạn mã nhỏ biên dịch thành JavaScript. Các ví dụ tích hợp bao gồm discriminated union, helper record generic, toán tử satisfies và các lỗi type cố ý để bạn có thể thấy cả trạng thái sạch và thất bại của compiler.
Có. Nó xây dựng một chương trình TypeScript trong trình duyệt và báo cáo các chẩn đoán từ compiler, bao gồm lỗi type, lỗi cú pháp và các thông báo về tùy chọn của compiler.
Có. Các điều khiển chính bao gồm target JavaScript, đầu ra module, strict mode, phát declaration và noUncheckedIndexedAccess.
Playground này cố ý sử dụng một thư viện type tích hợp gọn nhẹ. Đối với các type của framework, DOM, Node.js hoặc gói npm, hãy sử dụng thiết lập dự án cục bộ của bạn.
Trình chạy sử dụng một iframe sandbox cho các đoạn mã nhanh. Tránh chạy mã không đáng tin cậy và kiểm tra mã ứng dụng thực bên trong môi trường phát triển bình thường của bạn.
Tham khảo nội dung, trang hoặc công cụ này như sau:
"Sân chơi TypeScript" tại https://MiniWebtool.com/vi/san-choi-typescript/ từ MiniWebtool, https://MiniWebtool.com/
by miniwebtool team. Updated: 2026-05-23
MiniWebtool
Nếu bạn thích Sân chơi TypeScript, vui lòng cân nhắc việc liên kết công cụ này bằng cách sao chép/dán mã sau: