JavaScript ke TypeScript Online: PropTypes jadi Interface
Di sini Anda bisa mengubah JavaScript menjadi TypeScript dan melewati putaran pertama migrasi yang paling membosankan. Alat ini membaca kode Anda dengan parser, mengubah PropTypes React menjadi interface, mengambil tipe dari nilai bawaan, dan menambahkan tipe yang bisa ditentukan. Alat ini memproses satu berkas atau cuplikan sekaligus, tidak pernah menjalankan kode Anda, dan tidak mengunggah apa pun.Hal yang tidak bisa diketahuinya diserahkan kepada Anda. Bagian di bawah menjelaskan persisnya apa saja.
Cara menggunakan: dari JavaScript ke TypeScript online
- Tempel kode Anda ke kolom JavaScript atau JSX. Sebelum itu kolom menampilkan "Tempel JavaScript atau JSX di sini…". Batasnya 5.000.000 karakter.
- Tunggu sebentar. Alat ini mengonversi saat Anda mengetik atau menempel, sekitar 0,35 detik setelah perubahan terakhir, jadi tidak ada tombol yang perlu ditekan.
- Baca hasilnya di bawah judul "TypeScript", atau "TypeScript (TSX)" jika kode berisi JSX. Hasil ditampilkan sebagai kode berwarna yang hanya bisa dibaca.
- Lihat keterangan di atas kode. Keterangan itu menyebutkan apa yang dilakukan, misalnya "2 interface ditulis" atau "11 anotasi tipe ditambahkan". Jika tidak ada yang memerlukan tipe, tertulis "Tidak ada yang memerlukan tipe di sini, jadi kode hanya diformat ulang."
- Pilih Salin ke papan klip. Tombolnya berubah menjadi "Tersalin".
- Di bawah kode, Opsi konversi berisi dua kotak centang, Mode React dan Mode ketat. Jika Anda mengubah salah satunya, kode dikonversi ulang.
Jika teksnya bukan JavaScript yang valid, Anda akan melihat "Ini bukan JavaScript yang valid: kesalahan sintaks di baris N, kolom M." beserta baris yang bermasalah dan tanda di bawahnya. Kode yang sudah berisi sintaks TypeScript dianggap tidak valid. Alat ini bekerja pada kode yang Anda tempel, jadi cocok untuk satu komponen, modul, atau cuplikan, bukan seluruh repositori.
Contoh: komponen React dengan PropTypes
Masukannya adalah komponen penghitung kecil dengan PropTypes dan event handler tanpa tipe. Konverter menulis interface CounterProps: label wajib karena isRequired, sedangkan start dan onChange opsional. Nilai bawaan n = 1 menjadi n: number = 1, dan handler onClick pada button memberi e tipe React.MouseEvent untuk elemen tombol. Impor prop-types yang tidak terpakai dibuang, dan Prettier menata JSX menjadi beberapa baris. Secara keseluruhan alat ini melaporkan 1 interface ditulis dan 3 anotasi tipe ditambahkan.
Yang tidak berubah: useState(start) tetap seperti semula, karena konverter tidak menebak tipe dari cara sebuah nilai dipakai.
PropTypes React ke TypeScript: menjadi interface
Dengan Mode React aktif, konverter menulis interface bernama NamaProps dari PropTypes komponen, menempatkannya di atas komponen, dan memakainya untuk mengetik props. Ini berlaku untuk komponen fungsi (deklarasi, fungsi panah, dan yang dibungkus memo) serta kelas dengan propTypes statis atau penugasan Foo.propTypes = {...}. Prop dengan .isRequired wajib, prop lain diberi ?. Komentar di atas sebuah prop ikut pindah ke interface.
stringdannumbertetapstringdannumberboolmenjadibooleanfuncmenjadi tipe fungsi dengan argumen apa sajaarraydanobjectmenjadiany[]dan Record dengan kuncistringnodedanelementmenjadiReactNodedanReactElementarrayOf(T)danobjectOf(T)menjadiT[]dan Record dengan nilaiToneOf([...])menjadi gabungan literal, seperti'sm' | 'lg'oneOfType([...])menjadi gabungan tipe yang tercantumshape({...})danexact({...})menjadi tipe objekinstanceOf(Foo)menjadiFoo
Pernyataan propTypes dihapus, begitu pula impor prop-types jika tidak ada yang memakainya lagi. Komponen kelas juga mendapat interface state dari this.state = {...}. Kelas tanpa PropTypes mendapat interface props yang disusun dari this.props.x yang dibacanya. Komponen fungsi tanpa PropTypes hanya mendapat interface props dalam Mode ketat.
Tipe yang ditambahkan tanpa PropTypes, dan Mode ketat
- Nilai bawaan: parameter dengan nilai bawaan diberi tipe dari nilai itu, jadi
n = 5menjadin: number = 5danlet x = 0menjadilet x: number = 0. - Tipe kembalian: ditambahkan jika setiap
returnmenghasilkan tipe primitif yang sama (string,number, atauboolean), atau jika tidak ada sama sekali:void, atau Promise darivoiduntuk fungsiasync. - Field kelas: setiap
this.x = ...dalam kelas (yang tidak memperluas apa pun, atau komponen React) mendapat deklarasi properti. - Event React: parameter handler pada elemen DOM mendapat tipe event yang sesuai, seperti
React.ChangeEvent, untukonChange,onClick, atauonSubmit. - Ref:
useRef(null)mengambil tipe elemen dariref={...}tempat ia dipasang.
Mode ketat nonaktif secara default. Aktifkan untuk melihat semua celah. Mode ini menulis any secara eksplisit di tempat tipe tidak bisa ditentukan: let x; menjadi let x: any;, const list = [] menjadi any[], dan parameter tanpa tipe mendapat : any. Tanpa Mode ketat, tempat-tempat itu dibiarkan tanpa tipe. Dengan mode ini, daftar hal yang perlu diperbaiki mudah dicari.
Yang tidak diubah, komentar, dan privasi
Alat ini membaca satu potong kode dan tidak menebak apa pun. Kasus berikut dibiarkan apa adanya atau menjadi any:
- Parameter callback yang langsung diberikan ke sebuah pemanggilan, seperti pada
items.map((x) => ...): dibiarkan agar TypeScript mengetiknya dari fungsi yang menerimanya. - Tipe dari berkas lain atau validator PropTypes buatan sendiri: menjadi
any, dan validatornya tidak dipertahankan. - Komponen
forwardRef: PropTypes-nya tidak disentuh. - Komentar tipe JSDoc tidak dibaca.
- Tipe tidak pernah ditebak dari nama parameter atau cara pemakaiannya.
- Tidak ada inferensi lintas berkas: konversi dan periksa satu berkas sekali waktu.
- Dengan Mode React mati, PropTypes dibiarkan.
Hasilnya adalah putaran pertama, bukan migrasi yang selesai. Tempel ke proyek Anda, jalankan tsc, dan perketat setiap any secara manual. Konverter tidak mengganti nama berkas, jadi simpan komponen sebagai .tsx sendiri.
Komentar dan tata letak tetap terjaga: kode dibaca dengan @babel/parser, setiap anotasi disisipkan ke teks asli Anda sebagai suntingan, lalu Prettier memformat ulang hasilnya sambil mempertahankan gaya tanda kutip, titik koma, dan lebar indentasi Anda. Semuanya berjalan dalam Web Worker di browser Anda, dan kode Anda tidak pernah diunggah maupun dijalankan. Untuk merapikan kode sebelum dikonversi, gunakan Formatir Kode. Untuk memahami skrip yang diminifikasi atau diacak lebih dulu, gunakan Deobfuskator JS.
Pertanyaan yang sering diajukan
Bagaimana cara convert JavaScript ke TypeScript?
Tempel JavaScript atau JSX Anda ke kolom "JavaScript atau JSX". Sekitar sepertiga detik kemudian TypeScript muncul di bawah judul "TypeScript", atau "TypeScript (TSX)" jika kode berisi JSX. Tidak ada tombol konversi. Pilih "Salin ke papan klip" untuk mengambil hasilnya.
Apakah js to ts converter ini bisa mengubah PropTypes React menjadi interface?
Bisa. Dengan Mode React aktif, setiap objek propTypes menjadi interface yang dinamai sesuai komponennya, misalnya CounterProps. Prop dengan isRequired wajib, dan prop lain diberi tanda tanya. Pernyataan propTypes dihapus, begitu juga impor prop-types jika tidak dipakai bagian lain berkas. Ini berlaku untuk komponen fungsi dan kelas dengan propTypes statis.
Bagaimana mengubah komponen JSX menjadi TSX?
Tempel komponen JSX. Jika kode berisi JSX, hasilnya berjudul "TypeScript (TSX)" dan Mode React menyala sendiri, sehingga props mendapat interface dan handler mendapat tipe event. Alat ini tidak mengganti nama berkas. Simpan hasilnya di proyek Anda dengan ekstensi .tsx.
Apa fungsi Mode React dan Mode ketat?
Mode React, di bawah "Opsi konversi", mengubah PropTypes menjadi interface dan mengetik event handler, props, dan hook. Mode ini aktif secara default jika kode berisi JSX, react, atau prop-types, dan jika dimatikan, PropTypes dibiarkan. Mode ketat nonaktif secara default dan menulis any secara eksplisit di tempat tipe tidak bisa ditentukan, bukan membiarkannya kosong.
Mengapa hasilnya masih mengandung any?
Tipe hanya ditulis jika bisa dibaca dari kodenya sendiri. Validator PropTypes buatan sendiri atau tipe yang diimpor dari berkas lain menjadi any, dan Mode ketat menambahkan any eksplisit untuk variabel dan parameter tanpa tipe. Hasilnya adalah putaran pertama. Jalankan lewat tsc dan ganti setiap any dengan tipe yang sebenarnya.
Mengapa parameter callback tidak diberi tipe?
Parameter yang langsung diberikan ke sebuah pemanggilan, seperti x pada items.map((x) => x.id), sengaja dibiarkan agar TypeScript tetap bisa mengetiknya dari fungsi yang menerima callback itu.
Apakah komentar dan format kode saya dipertahankan?
Komentar dipertahankan, karena anotasi disisipkan ke kode asli Anda sebagai suntingan teks, bukan dengan membangun ulang kode. Setelah itu Prettier dijalankan, yang mempertahankan gaya tanda kutip, titik koma, dan lebar indentasi Anda, tetapi bisa memecah ulang baris yang panjang. Komentar di atas entri PropTypes pindah ke properti interface yang sesuai.
Apakah kode saya diunggah atau dijalankan oleh JavaScript to TypeScript converter online ini?
Tidak. Kode diurai dan ditulis ulang di browser Anda, dalam Web Worker, dan tidak pernah dikirim ke server. Kode juga tidak pernah dijalankan. Jika ada kesalahan sintaks, Anda melihat pesan dengan nomor baris dan kolom. Batasnya 5.000.000 karakter.
