Permudah alur kerja Anda: Cari miniwebtool.
Tambahkan
Alat terkait
Playground CSS FlexboxApakah JavaScript Diaktifkan?Konverter SVG ke React/JSX
Beranda > Peralatan untuk webmaster > Playground TypeScript
 

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).

Playground TypeScript
Kokpit kompiler browser
Memuat kompiler TypeScript
Contoh cepat:
TS playground.ts Menunggu kompiler
0 baris
Opsi kompiler
Alur kompilasi
TS
Sumber
Urai teks TypeScript
Tipe
Periksa kontrak dan inferensi
JS
Hasilkan
Hasilkan output JavaScript
Jalankan
Khusus konsol di-sandbox
ℹ Kompilasi terjadi di browser Anda. Pustaka tipe bawaan yang ringkas berguna untuk cuplikan kode; tipe paket khusus proyek tetap berada di pengaturan TypeScript lokal Anda.

Embed Playground TypeScript Widget

Output compiler
Menunggu TypeScript
Status tipe
Menunggu
Diagnostik
0
Ukuran output
0 B
Waktu kompilasi
0 ms
Compiler sedang dimuat. Diagnostik akan muncul di sini setelah kompilasi pertama.
Output eksekusi sandbox
Jalankan JavaScript hasil kompilasi untuk melihat output console di sini.
'; 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 = '
Compiler TypeScript tidak dapat dimuat
Periksa koneksi jaringan atau pemblokir konten Anda, lalu muat ulang halaman.
'; return; } setTimeout(function () { waitForCompiler(attempt + 1); }, 150); } waitForCompiler(0); })();
📲

Instal Aplikasi MiniWebtool

Tambahkan ke layar utama untuk akses instan — gratis, cepat, tanpa unduhan.

           

Ingin lebih cepat & tanpa iklan?

Tentang Playground TypeScript

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.

Apa yang Dilakukan TypeScript Playground Ini

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.

Cara Menggunakan Compiler TypeScript

  1. Tempel TypeScript ke dalam editor atau pilih contoh cepat.
  2. Pilih target JavaScript dan format module.
  3. Aktifkan strict mode dan pemeriksaan indexed access opsional ketika Anda menginginkan diagnostik yang lebih ketat.
  4. Klik kompilasi dan pemeriksaan tipe, atau biarkan auto compile diaktifkan untuk umpan balik langsung.
  5. Tinjau diagnostik, periksa JavaScript yang dihasilkan, lalu jalankan snippet sederhana di console sandbox.

Catatan Pemeriksaan Tipe

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.

Contoh dan Kasus Penggunaan

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.

  • Validasi tipe union sebelum menambahkannya ke model respons API.
  • Uji helper generik tanpa menunggu build aplikasi lengkap.
  • Periksa JavaScript yang dihasilkan saat mengubah opsi target atau module.
  • Bagikan reproduksi ringkas dari sebuah diagnostik TypeScript.
Untuk build produksi, gunakan halaman ini sebagai workbench diagnostik cepat, lalu jalankan compiler proyek, bundler, linter, pengujian, dan build framework Anda sebelum dirilis.

FAQ

Apakah alat ini memeriksa tipe TypeScript?

Ya. Alat ini membangun program TypeScript di dalam browser dan melaporkan diagnostik dari compiler, termasuk error tipe, error sintaks, dan pesan opsi compiler.

Bisakah saya mengubah opsi compiler TypeScript?

Ya. Kontrol utama mencakup target JavaScript, output module, strict mode, emit deklarasi, dan noUncheckedIndexedAccess.

Mengapa sebuah tipe pustaka tidak ada?

Playground ini sengaja menggunakan pustaka tipe bawaan yang ringkas. Untuk tipe framework, DOM, Node.js, atau paket npm, gunakan pengaturan proyek lokal Anda.

Apakah runner JavaScript aman?

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

Peralatan untuk webmaster:

Alat unggulan:

Pembuat Grup AcakKalkulator Kecocokan CintaKalkulator NumerologiKalkulator Zodiak Matahari, Bulan & Ascendant 🌞🌙✨Kalkulator Nomor NamaKompresor VideoKalkulator UsiaNama Generator AcakPengacak NomorPengacak DaftarKalkulator Pace LariKalkulator Persentase KenaikanKonverter Ukuran FileMengurutkan Berdasarkan AbjadBerapa Nomor Keberuntungan Saya?Gabungkan VideoGenerator Acak KataKonverter Biner ke DesimalPembuat Teka Teki SilangKalkulator TanggaKalkulator Durasi WaktuKonverter Desimal ke BinerKonverter DMS ke Derajat DesimalKalkulator hasil bagi dan sisaUrutkan AngkaHuruf Kecil Huruf BesarKalkulator Deviasi Standar RelatifKonverter FPSKalkulator Hari dalam Tahun - Hari ke Berapa Hari Ini?Kalkulator Defisit Kalori⏱️ Kalkulator JamHapus Nomor BarisAlat penghitung barisHari Per Bulankonverter ppm ke persenGenerator Skema WarnaLooper MP3Kalkulator Angka TakdirKonverter Persen ke PPMKalkulator Membandingkan PecahanKonverter Hex ke DesimalKonverter Lbs ke KgPembuat Kode MorseGenerator AnagramKalkulator Asupan ProteinGenerator Kode BatangGenerator Nomor LotereKalkulator Pengurangan PersenPemisah AudioPencarian ID Pengguna InstagramKalkulator Konversi GajiKonverter Kode Warna Semua FormatMengacak AngkaKalkulator Notasi IlmiahPencarian ID Pengguna FacebookGenerator Bracket Turnamen AcakKalkulator Penghasilan YouTube📅 Kalkulator TanggalKalkulator LuasKalkulator Usia KehamilanKalkulator Hari KelahiranPengembang Kalimat AIGenerator Teks Kecil ⁽ᶜᵒᵖʸ ⁿ ᵖᵃˢᵗᵉ⁾Hapus SpasiKalkulator Masa Pakai BateraiAntara Dua TanggalKalkulator Posisi MatahariPencarian Kutipan (Inggris)generator-teks-terbalikKonverter Desimal ke OktalGenerator PaletKalkulator Ukuran BanKonverter Oktal ke DesimalKalkulator Dosis ObatKalkulator Jumlah DigitKalkulator BTU ACKalkulator PembulatanTeks TerbalikKalkulator Kemiringan dan KelasKalkulator KomisiKalkulator MarkupKalkulator Nomor Jalan HidupPemilih AcakKalkulator Torsi BautPemilih Nama AcakKalkulator Pengurangan HukumanAnalisis Kompatibilitas Zodiak LanjutanKalkulator Depresiasi MobilKalkulator Lari 12 Menit CooperKonverter Biner ke Oktal🖱️ Penghitung KlikKalkulator Jam KerjaKalkulator KombinasiKonverter HexadecimalPencari KerjaPenghitung karakterGenerator IMEI AcakKalkulator AtapKalkulator Bilangan KompleksKalkulator LuasKalkulator Perpindahan PanasKalkulator PersegiKalkulator Segitiga Siku-SikuPanduan Ukuran Gambar Media SosialPemilih Nomor AcakBalik GambarKalkulator PerkalianKonverter Oktal ke BinerParafrase AIKalkulator Persen Kesalahan⏱️ Timer Hitung MundurKalkulator Monetisasi YouTube ShortsKalkulator Persentase Roti📅 Kalkulator Selisih TanggalKalkulator VO2 MaxKonverter Angka ke KataKonverter Desimal ke HeksadesimalPemeriksa Nama Pengguna Media SosialKalkulator PVIFKalkulator Stock SplitPembuat Huruf AcakPencari Batu Kelahiran dan Bunga ZodiakKalkulator Perubahan PersentaseAlat Pengulangan TeksGenerator Kekuatan Super AcakKalkulator Berat BajaKalkulator CatKalkulator GFRKalkulator Angka KepribadianKalkulator Persentil BMI Anak⬛ Kalkulator Rasio AspekKalkulator Strategi MartingaleKonverter Basis Bilangan🔍 Pemeriksa PlagiarismeTabel ASCIITabel Periodik InteraktifKalkulator Digital Jiwa MendesakKalkulator Aliran PipaKalkulator Bitrate VideoKalkulator Pencampuran Warna Cat👙 Kalkulator Ukuran BraKalkulator Ukuran Cetak dan Resolusi (DPI/PPI)Kalkulator Waktu Donor DarahKalkulator AspalKalkulator Yard KubikKalkulator Panjang AntenaKalkulator Pengisian KonduitKalkulator Kapasitor Seri dan ParalelKalkulator Reaktansi InduktifKalkulator Pencahayaan RuanganKalkulator Lux ke LumenKonverter Lumen ke WattKalkulator Ukuran GeneratorKonverter mAh ke WhKalkulator Daya 3 FasaKalkulator kVAKalkulator Ampere ke WattKalkulator Watt ke AmpereKalkulator Resistor SeriKalkulator GesekanKalkulator Bidang MiringKalkulator Keuntungan MekanisKalkulator Kecepatan SuaraKalkulator Kecepatan GelombangKalkulator Daya ApungKalkulator Kecepatan TerminalKalkulator Panjang Gelombang de BroglieKalkulator Energi FotonKalkulator E=mc²Kalkulator Dilatasi WaktuKalkulator Hukum Ketiga KeplerKalkulator Kecepatan LepasKalkulator Gaya GravitasiKalkulator Hukum Beer-LambertKalkulator Persamaan NernstKalkulator Tekanan OsmotikKalkulator Kenaikan Titik DidihKalkulator Penurunan Titik BekuKalkulator Komposisi PersenKalkulator NormalitasKalkulator MolalitasKonverter pKa ke KaKalkulator Henderson-HasselbalchKalkulator Hasil TeoretisKalkulator Reaktan PembatasKalkulator Konfigurasi ElektronGenerator Rencana Pembelajaran AIGenerator Kuis AIGenerator Sitasi APA/MLA/ChicagoKalkulator Persentase KehadiranKalkulator Skor APKalkulator Skor ACTKalkulator Skor SATKonverter Persentase ke CGPAKonverter CGPA ke PersentasePenilai Nilai Mudah (EZ Grader)Kalkulator Biaya Membesarkan AnakKalkulator Asupan Susu BayiKalkulator Ukuran PopokGenerator Nama BayiPrediktor Warna Mata BayiPrediksi Tinggi Badan AnakKalkulator Waktu Penggandaan hCGKalkulator Perkiraan Lahir IVFKalkulator ImplantasiPrediktor Jenis Kelamin Bayi CinaPemformat Tanggal ISO 8601Konverter Tanggal JulianKalkulator Tidur SiangMoon Phase CalculatorKalkulator Matahari Terbit & TerbenamJam DuniaKonverter Tanggal ke Angka RomawiHitung Mundur PensiunKalkulator PemulihanKalkulator Setengah Ulang TahunKalkulator Hari JadiKalkulator Nomor MingguKalkulator Pembagian TipKalkulator ROI Email MarketingKalkulator Biaya Per LeadKalkulator Modal KerjaKalkulator Margin KontribusiKalkulator FIFO / LIFOKalkulator Stok PengamanKalkulator Titik Pemesanan UlangKalkulator Kuantitas Pesanan Ekonomis EOQKalkulator PenyusutanKalkulator Harga KerajinanKalkulator Harga GrosirKalkulator Keuntungan ShopifyKalkulator Amazon FBAKalkulator Biaya eBayKalkulator Biaya EtsyKalkulator Biaya StripeKalkulator Biaya PayPalKonverter Odds TaruhanKalkulator PerpuluhanKalkulator ZakatKalkulator Bea Meterai InggrisKalkulator Pembebasan HRAKalkulator GratuityKalkulator NPSKalkulator EPFKalkulator PPFKalkulator RDKalkulator SWPKalkulator Gross-UpKalkulator Perbandingan PinjamanKalkulator Pemanfaatan KreditKalkulator Tangga DepositoKalkulator T-Bill Surat PerbendaharaanKalkulator I BondKalkulator Tabungan Kuliah 529Kalkulator HSAKalkulator PesangonKalkulator Kenaikan GajiPembuat FakturKalkulator Uang Harian PerjalananKalkulator Penggantian Jarak TempuhKalkulator Kenaikan SewaKalkulator Sewa ProrataKalkulator Keterjangkauan SewaKalkulator Harga Total MobilKalkulator Keterjangkauan MobilKalkulator Pinjaman MotorKalkulator Pinjaman RVKalkulator Pinjaman KapalKalkulator Pinjaman TanahKalkulator Pinjaman KonstruksiKalkulator Hipotek Bunga SajaKalkulator Pinjaman BalonKalkulator Poin HipotekKalkulator PMIKalkulator Pembayaran Hipotek Dua MingguanKalkulator Hipotek ARMKalkulator Pinjaman VAKalkulator Gaji BersihGenerator Kueri SQL AIGenerator Regex AIVisualisator Data AI (Tempel CSV)Penganalisis Nada Teks AIPenganalisis Resume / CV AIKonverter Satuan AI (Bahasa Alami)Penulis Surat Permintaan Maaf AIGenerator Alasan Sopan AIGenerator Itinerary Perjalanan AIAI Reading List GeneratorGenerator Rencana Latihan AIGenerator Rencana Makan AIGenerator Ide Hadiah AIAI Recipe Generator dari BahanKalkulator ROI BeasiswaKalkulator Biaya KuliahKalkulator Jam Belajar Bahasa hingga FasihGenerator Kuis KosakataGenerator Catatan CornellKalkulator Kurva BelajarPenjadwal Pengulangan Berjarak Kartu FlashKalkulator Nat KeramikKalkulator Kapabilitas Proses Six SigmaPengunduh Thumbnail YouTubeGenerator Karakter RPG Acak
×

Bantu kami dan jawab 3 pertanyaan cepat

Terima kasih telah mengikuti survei kami. Komentar Anda akan membantu kami meningkatkan layanan kami.

Di mana Anda pertama kali mendengar tentang kami?

Apa alat favorit Anda di situs kami?

Jika lain, sebutkan:

Seberapa besar kemungkinan Anda merekomendasikan alat ini kepada teman?

mustahilYang paling disukai

Skor Kemungkinan: (1-10)