Lewati ke konten
Alat konversi

Konverter TypeScript ke JavaScript Daring — TS/TSX ke JS/JSX

Hapus tipe TypeScript — anotasi, antarmuka, alias tipe, dan generik — untuk mendapatkan JavaScript biasa. Mendukung .ts dan .tsx: JSX dipertahankan apa adanya sehingga komponen TSX menjadi JSX. Kode dikonversi secara lokal di browser Anda; tidak ada pemeriksaan tipe, bundling, atau eksekusi.

Lihat tampilan cuplikan TypeScript sebagai JavaScript biasa sebelum menggunakannya dalam proyek JS.

Code is converted on the server. No type-checking, execution or dependency bundling is performed. JSX is preserved.

Load an example (replaces your input)

TypeScript

JavaScript

Kapan menggunakannya

  • Lihat tampilan cuplikan TypeScript sebagai JavaScript biasa sebelum menggunakannya dalam proyek JS.
  • Ubah komponen React .tsx menjadi .jsx dengan menghapus tipe props sambil mempertahankan JSX.

Cara penggunaan

  1. Tempelkan TypeScript atau TSX, atau muat contoh (antarmuka dan fungsi, generik, JSX). Memuat contoh akan mengganti masukan Anda.
  2. Baca JavaScript di sebelah kanan. Anotasi tipe dan antarmuka dihapus; kode yang ada saat runtime, seperti enum, dihasilkan sebagai JavaScript.
  3. Salin hasilnya. Jika memerlukan keamanan tipe, periksa tipe TypeScript asli secara terpisah dengan tsc --noEmit.

Masukan TypeScript

interface User { name: string }
const greet = (user: User): string => "Hello, " + user.name;

Keluaran JavaScript

const greet = user => "Hello, " + user.name;

Detail dan batasan

Kode Anda dikonversi secara lokal di browser dan tidak diunggah. Hapus masukan setelah menggunakan perangkat bersama.

Menghapus tipe bukan berarti memeriksa tipe: const count: number = "text" dikonversi tanpa kesalahan. Periksa tipe dengan compiler TypeScript.

JSX tetap berupa JSX. Untuk menjalankan komponen React di browser, Anda masih memerlukan tahap build JSX pada proyek.

Konstruksi yang memiliki nilai saat runtime, seperti enum, menghasilkan kode JavaScript alih-alih dihapus.

Hanya kode yang ditempelkan yang dikonversi: impor tidak diselesaikan, file tidak digabungkan, dan sintaks modern tidak diturunkan untuk browser lama.

FAQ

Bisakah saya mengonversi TSX ke JSX?

Ya. Tempelkan komponen .tsx: tipe props dan antarmuka dihapus, sedangkan JSX tetap sama sehingga hasil dapat disimpan sebagai .jsx. Mengompilasi JSX menjadi pemanggilan React.createElement bukan bagian dari alat ini.

Apa bedanya dengan menjalankan tsc?

tsc memeriksa tipe seluruh proyek dan dapat menghasilkan JavaScript untuk target yang dipilih. Halaman ini hanya menghapus tipe dari kode yang Anda tempelkan dengan transformasi TypeScript Babel, mempertahankan sintaks modern, dan tidak pernah melaporkan kesalahan tipe. Untuk seluruh proyek, jalankan tsc atau bundler seperti esbuild secara lokal.

Mengapa kode yang memiliki kesalahan tipe tetap dikonversi?

Konversinya bersifat sintaktis. Alat ini tidak memeriksa penugasan atau pemanggilan fungsi terhadap tipenya, jadi jalankan compiler TypeScript dalam proyek untuk menemukan kesalahan tipe.

Apa yang perlu diperiksa saat muncul kesalahan sintaks?

Periksa baris dan kolom yang dilaporkan, tanda kurung di sekitarnya, serta anotasi tipe di sana. Memperkecil kode menjadi cuplikan singkat membantu menemukan masalah; untuk kesalahan koneksi, gunakan Coba Lagi.

Spesifikasi dan referensi