Konversi TypeScript ke JavaScript Online
Transpilasi TypeScript ke JavaScript di browser Anda. Tidak perlu menginstal Node.js atau tsc. Sempurna untuk mempelajari TS dan berbagi kode.
function greet(user: User) {
const greeting = "Hello, " + user.name;
return greeting;
}
const users: User[] = [
{ name: "John", age: 30, active: true },
];Mengapa menggunakan transpiler ini
TypeScript ke JavaScript: tanpa perlu instalasi
Tanpa Node.js atau npm
Transpilasi TypeScript langsung di browser. Tanpa menginstal tsc, tanpa tsconfig.json, tanpa dependensi.
Compiler resmi
Menggunakan compiler TypeScript Microsoft yang dikompilasi ke WebAssembly, menghasilkan output yang sama dengan tsc lokal.
Pelajari TypeScript
Pahami persis apa yang dihasilkan compiler dari tipe, interface, dan generik Anda.
Bagikan kode
Bagikan potongan kode JavaScript ke tim atau lingkungan yang belum mengonfigurasi TypeScript.
Cara kerjanya
Tiga langkah, tanpa kerumitan
Tempel kode TypeScript Anda
Tempel kode .ts Anda: interface, tipe, generik, enum, decorator, atau fitur TypeScript apa pun yang ingin Anda konversi ke JavaScript murni.
Transpilasi instan
Compiler TypeScript resmi yang dikompilasi ke WebAssembly menghapus anotasi tipe dan mentranspilasi ke JavaScript ES2015+ dalam milidetik.
Salin JavaScript yang dihasilkan
Dapatkan JavaScript yang setara, siap dijalankan di browser, Node.js, atau dibagikan ke tim yang tidak menggunakan TypeScript.
FAQ
Ada pertanyaan?
Transpiler menghapus semua elemen yang eksklusif untuk TypeScript dan tidak memiliki representasi dalam JavaScript: anotasi tipe seperti string, number, boolean, dan T[], interface, alias tipe, generik, modifier akses seperti public, private, protected, dan readonly pada kelas, enumerasi yang dikonversi ke objek JavaScript, operator type assertion as, kata kunci declare untuk deklarasi ambient, dan decorator eksperimental seperti @Component dan @Injectable. Struktur kontrol, fungsi, kelas dalam bagian nilainya, modul import/export, dan seluruh logika program dipertahankan persis.
Transpiler online menggunakan compiler TypeScript resmi yang dikembangkan Microsoft, diterbitkan sebagai open source pada Oktober 2012, dan saat ini berada di versi 5.x, dengan konfigurasi target ES2015 atau ES2017. Untuk produksi nyata, alur kerja yang benar adalah menginstal TypeScript dengan npm install typescript, mengonfigurasi tsconfig.json dengan keketatan yang tepat di mana strict: true adalah praktik yang direkomendasikan sejak TypeScript 2.3, lalu menjalankan tsc atau menggunakan bundler seperti Vite, esbuild, SWC, atau webpack dengan ts-loader. Keunggulan transpiler online adalah kecepatan untuk eksplorasi, pembelajaran, atau berbagi potongan kode; ini tidak menggantikan toolchain produksi dengan pemeriksaan tipe, source map, dan optimasi bundle.
TypeScript memiliki dua sistem decorator: decorator legacy dengan --experimentalDecorators yang tersedia sejak TypeScript 1.5 pada 2015 dan digunakan oleh Angular, NestJS, serta inversify; serta decorator TC39 Stage 3 yang diimplementasikan di TypeScript 5.0 pada Maret 2023 mengikuti proposal ECMAScript. Transpiler online mendukung keduanya melalui konfigurasi yang sesuai. Decorator legacy menghasilkan kode JavaScript dengan panggilan __decorate() dan __metadata(); decorator TC39 Stage 3 menghasilkan kode yang lebih bersih mengikuti proposal ECMAScript standar.
TypeScript mendukung JSX melalui file .tsx. Konfigurasi jsx compiler mengontrol cara JSX ditransformasi: react untuk mengubah ke React.createElement() dengan perilaku klasik; react-jsx untuk menggunakan JSX transform baru React 17+ yang mengimpor dari react/jsx-runtime; react-native untuk membiarkan JSX tidak ditransformasi; dan preserve untuk membiarkan JSX diproses oleh transpiler lain seperti Babel. Untuk proyek React dengan TypeScript, alur yang direkomendasikan adalah menggunakan Vite yang menggunakan esbuild secara internal untuk TSX, atau CRA/Next.js yang menyertakan transpilasi TSX secara default.
Ya. Import dan export modul ES6 dipertahankan secara default ketika target adalah ES2015 atau lebih tinggi. TypeScript juga menghapus import yang hanya berupa tipe, karena tidak memiliki representasi saat runtime. Ketika target adalah CommonJS dengan module: commonjs dalam tsconfig, import/export diubah menjadi require() dan module.exports, yaitu sistem modul Node.js. Untuk penggunaan di browser dengan modul ES native, target ES2015 dengan module: ESNext adalah yang paling tepat.
Ya. TypeScript dirancang oleh Anders Hejlsberg yang juga merancang C# dan Turbo Pascal di Microsoft, dan diterbitkan sebagai open source pada Oktober 2012. Definisi resminya adalah bahwa TypeScript adalah JavaScript yang diketik untuk aplikasi skala besar. Semua JavaScript yang valid adalah TypeScript yang valid; Anda dapat mengganti nama file .js apa pun menjadi .ts tanpa perubahan. TypeScript menambahkan sistem tipe berupa anotasi, interface, dan generik; enumerasi; decorator eksperimental; serta beberapa fitur ECMAScript tahap lanjut. Compiler tsc adalah transpiler JavaScript modern pertama yang diadopsi secara luas, pendahulu ekosistem Babel, esbuild, SWC, dan Vite saat ini.
TypeScript ke JavaScript online: transpilasi TS tanpa menginstal Node.js atau tsc
TypeScript adalah bahasa pemrograman yang dikembangkan Microsoft dan diterbitkan sebagai open source pada Oktober 2012. Dirancang oleh Anders Hejlsberg yang juga bertanggung jawab atas desain C# pada 2000 dan Turbo Pascal pada 1983, dengan tujuan menskalakan JavaScript untuk aplikasi besar melalui sistem tipe statis opsional. TypeScript adalah superset sintaksis dari JavaScript (ECMAScript): semua JavaScript yang valid adalah TypeScript yang valid, dan compiler tsc menghasilkan JavaScript standar sebagai output. TypeScript 5.x adalah salah satu bahasa yang paling banyak digunakan menurut Stack Overflow Developer Survey 2024, dengan adopsi masif di ekosistem seperti Angular yang membutuhkan TypeScript sejak versi 2 pada 2016, NestJS, Next.js, dan hampir semua proyek frontend skala besar. Kebutuhan akan transpiler online muncul dalam beberapa skenario: mengeksplorasi cara TypeScript mengompilasi fitur tertentu tanpa menyiapkan proyek lokal, pembelajaran interaktif sistem tipe, berbagi kode dengan pengembang yang bekerja dengan JavaScript murni, dan pembuatan prototipe cepat.
Proses transpilasi TypeScript ke JavaScript pada dasarnya terdiri dari type erasure: compiler menganalisis kode TypeScript, memverifikasi konsistensi sistem tipe dalam mode pemeriksaan tipe penuh, dan menghasilkan JavaScript dengan menghapus semua informasi tipe yang tidak memiliki representasi saat runtime. Elemen yang dihapus meliputi anotasi tipe pada variabel, parameter fungsi, dan tipe kembalian; interface dan alias tipe lengkap; modifier akses pada kelas; parameter tipe dalam generik; type assertion; serta deklarasi ambient. Elemen yang ditransformasi bukan sekadar dihapus meliputi enumerasi yang dikonversi ke objek JavaScript dengan pemetaan dua arah; decorator legacy yang menghasilkan kode pembantu __decorate() dan __metadata(); serta fitur ECMAScript tahap lanjut yang TypeScript implementasikan sebelum tersedia di semua mesin JavaScript.
Ekosistem alat transpilasi TypeScript telah berkembang signifikan. Compiler tsc asli yang tersedia sebagai paket npm typescript sejak 2012 adalah referensi perilaku dan yang menyediakan pemeriksaan tipe penuh. Untuk kecepatan build pada proyek besar, alternatif yang memprioritaskan kecepatan transpilasi telah muncul: esbuild dari Evan Wallace pada 2020 yang ditulis dalam Go dan 10-100 kali lebih cepat dari tsc; SWC pada 2019 yang ditulis dalam Rust dan digunakan oleh Next.js dan Vercel; serta transformer TypeScript Babel. Alat-alat ini melakukan type erasure tanpa memeriksa tipe; untuk pemeriksaan tipe dalam CI/CD, tsc --noEmit dijalankan secara paralel. Convertir.ai menggunakan compiler TypeScript resmi yang dikompilasi ke WebAssembly untuk menjamin fidelitas tepat dengan perilaku tsc, menjalankan seluruh proses di browser Anda tanpa mengirim kode ke server mana pun.