Playground TypeScript
Tulis, kompilasi, periksa tipe, dan jalankan TypeScript di browser Anda dengan diagnostik langsung, hasil cetak JavaScript, kontrol mode ketat, contoh cepat, dan konsol dengan lingkungan terisolasi (sandbox).
Tulis, kompilasi, periksa tipe, dan jalankan TypeScript di browser Anda dengan diagnostik langsung, hasil cetak JavaScript, kontrol mode ketat, contoh cepat, dan konsol dengan lingkungan terisolasi (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 = 'Jalankan JavaScript hasil kompilasi untuk melihat output console di sini.'; }); 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 + ' siap'; setStatus('ready', 'Compiler siap'); compileNow(); return; } if (attempt > 80) { compilerStateEl.textContent = 'Compiler tidak tersedia'; setStatus('error', 'Compiler tidak tersedia'); diagnosticsEl.innerHTML = '
'; return; } setTimeout(function () { waitForCompiler(attempt + 1); }, 150); } waitForCompiler(0); })();
Pemblokir iklan Anda mencegah kami menampilkan iklan
MiniWebtool tetap gratis karena iklan. Jika alat ini membantu Anda, dukung kami dengan upgrade untuk penjelajahan tanpa iklan dan penggunaan harian lebih banyak, atau izinkan MiniWebtool.com lalu muat ulang.
TypeScript Playground ini memungkinkan Anda menguji sebuah snippet dengan cepat tanpa membuka proyek lengkap. Alat ini menjalankan compiler TypeScript di browser Anda, menampilkan diagnostik pemeriksaan tipe dengan nomor baris, menghasilkan JavaScript, dan dapat menjalankan output sederhana di console sandbox.
Alat ini dirancang untuk pemeriksaan TypeScript sehari-hari: memvalidasi penyempitan union, menguji tipe helper generik, membandingkan target compiler, mengonfirmasi perilaku strict mode, dan meninjau JavaScript yang dihasilkan TypeScript. Alat ini berguna untuk belajar, men-debug contoh ringkas, menyiapkan jawaban, atau memeriksa refactor kecil sebelum memindahkannya ke dalam proyek.
Compiler browser menggunakan file deklarasi bawaan yang ringkas untuk objek JavaScript umum seperti array, string, record, JSON, console, dan timer. Hal ini membuat playground tetap cepat dan mandiri untuk snippet. Jika kode Anda bergantung pada React, Node.js, DOM API, atau deklarasi spesifik paket, konfirmasikan hasil akhirnya di dalam proyek Anda dengan tsconfig.json asli dan paket tipe yang terinstal.
Gunakan playground ketika Anda ingin mengisolasi error tipe dari basis kode yang lebih besar, membandingkan bagaimana strict mode mengubah diagnostik, menjelaskan konsep TypeScript kepada rekan tim, atau memeriksa bagaimana snippet kecil terkompilasi menjadi JavaScript. Contoh bawaan mencakup discriminated union, helper record generik, operator satisfies, dan kesalahan tipe yang disengaja sehingga Anda dapat melihat baik kondisi compiler yang bersih maupun yang gagal.
Ya. Alat ini membangun program TypeScript di dalam browser dan melaporkan diagnostik dari compiler, termasuk error tipe, error sintaks, dan pesan opsi compiler.
Ya. Kontrol utama mencakup target JavaScript, output module, strict mode, emit deklarasi, dan noUncheckedIndexedAccess.
Playground ini sengaja menggunakan pustaka tipe bawaan yang ringkas. Untuk tipe framework, DOM, Node.js, atau paket npm, gunakan pengaturan proyek lokal Anda.
Runner menggunakan iframe sandbox untuk snippet cepat. Hindari menjalankan kode yang tidak tepercaya, dan uji kode aplikasi nyata di dalam lingkungan pengembangan normal Anda.
Kutip konten, halaman, atau alat ini sebagai:
"Playground TypeScript" di https://MiniWebtool.com/id/playground-typescript/ dari MiniWebtool, https://MiniWebtool.com/
by miniwebtool team. Updated: 2026-05-23
MiniWebtool
Jika Anda menyukai Playground TypeScript, pertimbangkan untuk menautkan alat ini dengan menyalin/menempelkan kode berikut: