Bereaksi dengan TypeScript atau JavaScript: Mana yang Lebih Baik?

Apa itu TypeScript?

TypeScript open-source menyediakan kompiler yang mengubah kode TypeScript menjadi kode JavaScript. Bahasa itu adalah open-source dan cross-browser. Misalkan hampir tidak ada kelemahan logis dalam bahasa js. Dalam hal ini, Anda dapat menggunakan TypeScript dengan mengganti nama file skrip .js Anda menjadi.ts dan mulai menerima kode TypeScript yang sesuai.

Bahasa JavaScript akan menjadi versi khusus dari TypeScript. Anders Hejlsberg, seorang rekan teknis di Microsoft, memperkenalkan dan membuatnya pada tahun 2012. Karena JavaScript menjadi lebih populer, kode JS menjadi lebih besar dan lebih sulit untuk dipahami, itulah sebabnya TypeScript dikembangkan. Ketika programmer mulai menggunakan JavaScript untuk teknologi sisi server, ini menjadi lebih jelas.

Apa itu JavaScript?

Setiap kali halaman pengguna melakukan lebih dari sekadar berakhir di sana dan menampilkan data statis untuk Anda lihat — menampilkan konten yang lebih baik, visualisasi, grafik kartun 2D/3D, menelusuri pemutar rekaman video, dll. — Anda dapat bertaruh bahwa JavaScript adalah mungkin terlibat. JavaScript adalah bahasa scripting atau coding yang memungkinkan Anda untuk menggabungkan struktur lanjutan pada halaman web. Ini adalah kue lapis ketiga yang terdiri dari teknologi web standar, dua yang pertama (HTML dan CSS).

Apakah Bereaksi Lebih Baik dengan JavaScript atau TypeScript?

Pada pemeriksaan pertama, tampaknya tidak ada perbedaan antara kode dari React TypeScript standar dan JavaScript. Ini sepenuhnya diharapkan mengingat TypeScript adalah Kumpulan Kode dan merupakan nenek moyang JavaScript. Perbedaan antara JavaScript dan TypeScript tidak banyak berubah selama beberapa tahun terakhir. Anda siap untuk pergi jika Anda mengenal mereka.

Kemajuan teknologi di masa depan dapat mempercepat produksi perangkat lunak, meningkatkan permintaan akan programmer. Silakan gunakan bahasa apa pun; kami mengantisipasi pengembangan baik dalam proyek kecil maupun besar: Pilih TypeScript untuk proyek besar dengan tim internasional atau JavaScript untuk tugas langsung dengan tim hebat.

JavaScript banyak digunakan. Mereka menganalisisnya dan menemukan bahwa bahasanya tidak stabil dan tidak dapat diprediksi. Jika perlu, kerangka kerja JS dapat diterjemahkan ke TypeScript. Tenaga kerja diperlukan untuk mengubah sistem JS populer menjadi TS.

File The.d.ts harus didokumentasikan dan berisi semua metodologi yang dikembalikan untuk setiap pustaka porting. porting jQuery membutuhkan upaya lebih lanjut. Mungkin ini tidak terlalu sulit. TypeScript didukung oleh IDEA, WebStorm, Expressive, Particle, dan lainnya.

Kode Bereaksi dan Jenis File dalam TypeScript vs. JavaScript

Pada pemeriksaan pertama, tampaknya tidak ada perbedaan antara kode dari React TypeScript standar dan JavaScript.

Ini sepenuhnya diharapkan mengingat TypeScript adalah Kumpulan Kode dan merupakan nenek moyang JavaScript. Ini menyiratkan bahwa setiap pemrograman berbasis JavaScript juga akan dapat mengeksekusi file TypeScript. Demikian pula, tidak semua bahasa SASS dapat menjadi kode CSS yang sah; ide ini menyatakan bahwa semua CSS dapat diterima pada kode SASS.

Namun, komputer tidak dapat menjalankan bahasa TypeScript, itulah sebabnya sebagian besar aplikasi TypeScript Anda memiliki tsconfig.json. File konfigurasi ini akan mengubah cara kompiler TypeScript berperilaku dan menerjemahkan kode TypeScript ke dalam JavaScript, yang kemudian dapat dipahami dan digunakan oleh browser.

Perbedaan utama antara TypeScript dan aplikasi JavaScript React adalah nama file yang pertama. Misalnya, TSX, sedangkan yang terakhir adalah.js.

Bagaimana Cara Membuat Proyek Bereaksi di TypeScript?

Anda dapat membuat proyek TypeScript React baru dengan menggunakan pustaka create-react-app di lingkungan Anda dan menggunakan perintah ini:

 npx create-react-app my-app --template typescript

atau,

 yarn create react-app my-app --template Typescript

Jika Anda memiliki proyek JavaScript React yang ingin Anda ubah menjadi TypeScript, Anda dapat menjalankan perintah ini.

 npm install — save typescript @types/node @types/react @types/react-dom @types/jest

atau,

 yarn add typescript @types/node @types/react @types/react-dom @types/jest

Setelah menjalankan perintah, Anda dapat mengganti nama semua file .js menjadi .tsx, memulai ulang server, dan memulai.

1. Penangkap Serangga

Proporsi cacat yang tersisa yang dapat diperbaiki TypeScript meningkat ketika lebih banyak bug yang tidak terdeteksi ts disetel dengan cara lain, tetapi ini juga menurunkan jumlah keseluruhan masalah yang masih dapat diperbaiki oleh TypeScript. Oleh karena itu, meskipun proporsinya dapat meningkat, jumlah masalah yang ditemukan mungkin sedikit berubah.

2. Pembantu IntelliSense di IDE

Komponen Daftar, Info Parameter, Info Cepat, dan Seluruh Kata adalah beberapa fungsi yang ditawarkan oleh IntelliSense, alat pelengkap kode. Hanya dengan beberapa penekanan tombol, Anda dapat menambahkan panggilan ke atribut dan metode, mencatat argumen yang Anda ketik, dan menemukan sedikit tentang perangkat lunak yang Anda gunakan berkat kemampuan ini.

3. Ketik Sistem

Anda mungkin bertanya-tanya bagaimana cara mengetik variabel atau objek Anda secara ketat sehingga kode proyek React TypeScript Anda dapat mengaktifkan Bug Catcher dan IntelliSense. Untuk menyediakan Proses TypeScript Type yang berjalan untuk Anda dalam proyek TypeScript Reactive, ada tiga hal yang perlu diingat.

1. Deklarasikan interaksi untuk objek/array dan subtipe untuk variabel tipe primitif.

Untuk membuat bidang dalam objek opsional, Anda dapat menggunakan Operator. Ini akan mencegah TypeScript mengganggu Anda ketika memeriksa kode Anda.

2. Bila perlu, nyatakan tipe komponen fungsional

3. Anda dapat menggunakan ini secara gratis. Menginisialisasi properti dengan nilai memungkinkan TypeScript memilih kualitas untuk Anda dengan segera.

5 Alasan Menggunakan TypeScript dengan React

TypeScript sangat diminati oleh programmer front-end selama beberapa tahun terakhir. Beberapa faktor yang berkontribusi terhadap keberhasilannya adalah peningkatan penggunaan kembali, keseragaman kode, dan dukungan platform di masa mendatang. Selain itu, reaksi tetap tidak memihak, menawarkan pemrogram opsi untuk menggunakan TypeScript atau JavaScript. Sebaliknya, banyak platform dan perpustakaan lain mengadopsi TypeScript secara default.

Dalam posting ini, kita akan membahas 5 argumen menarik yang mendukung penggunaan TypeScript untuk aplikasi React.

1. Komponen mudah dibaca dan dipahami

Jenis prop mudah ditentukan menggunakan TypeScript, yang membuat kode jauh lebih tepat dan mudah dipahami. Selain itu, dukungan untuk IntelliSense dan pemeriksaan tipe statis akan disertakan.

Bersama-sama, faktor-faktor ini meningkatkan proses pengembangan dan mengurangi kemungkinan cacat. Selain itu, menambahkan catatan ke jenis Prop membuat definisi komponen lebih mudah dipahami.

2. Dukungan BEJ yang lebih baik

Manfaat lain dari TypeScript + React meningkatkan IntelliSense dan sintesis kode untuk JSX. Bit memudahkan untuk mendistribusikan, mendeskripsikan, dan menggunakan kembali komponen independen di seluruh proyek. Gunakan untuk membuat aplikasi yang dapat diskalakan, menjaga desain yang konsisten, mempromosikan penggunaan kembali kode, bekerja sama dengan orang lain, dan mempercepat pengiriman.

3. Dukungan untuk TypeScript secara default di perpustakaan bersama

Misalkan Anda menggunakan TypeScript beberapa tahun yang lalu. Dalam hal ini, Anda mungkin ingat betapa frustasinya mencari Konsep yang muncul untuk perpustakaan pihak ketiga. Tapi sekarang TypeScript dengan cepat mendapatkan popularitas; perpustakaan yang paling banyak digunakan mendukung Definisi Tipe. Selain itu, Definisi Tipe didukung oleh arsitektur pustaka React, jadi Anda tidak perlu lagi mengkhawatirkannya.

4. Implementasi bertahap untuk proyek saat ini

Memilih TypeScript tidak akan menjadi keputusan hidup atau mati yang sederhana. Sebaliknya, ini adalah perubahan progresif berdasarkan status program pada saat itu. Sebagai contoh, katakanlah Anda telah memilih untuk menggunakan TypeScript untuk proyek React saat ini. Dalam situasi itu, Anda harus mempertimbangkan cara mengoperasikan TypeScript dan JavaScript secara bersamaan sambil secara progresif memperluas penggunaan TypeScript. Selain itu, Anda dapat mengatur parameter compiler TypeScript untuk bermigrasi secara bertahap.

5. Keuntungan IntelliSense dan validasi tipe statis secara umum

sebuah. Pengujian untuk tipe statis

Kesalahan lebih mudah dikenali lebih cepat karena pemeriksaan tipe statis. Contoh yang disebutkan sebelumnya dengan tepat mengenali bahwa string, bukan angka, diperlukan sebagai input untuk metode get details.

b. IntelliSense yang lebih baik

Anda dapat mempercayai bahwa IntelliSense tetap 100% benar ketika validasi data statis TypeScript dan IntelliSense digabungkan.

c. Meningkatkan Pemfaktoran Ulang

Refactoring jauh lebih sederhana dengan TypeScript karena kita tahu Bahasa yang tepat dan di mana melakukan perubahan. Selain itu, jika masalah ditemukan dengan cepat, Anda tidak akan mengambil risiko merusak apa pun.

d. Lebih sedikit kesalahan yang tidak didefinisikan

Karena penafsir TypeScript juga mengidentifikasi kesalahan yang tidak ditentukan pada waktu transpile, kemungkinan kesalahan tersebut terjadi pada saat eksekusi berkurang.

e. Peningkatan keterbacaan dan pemeliharaan

Basis kode akan jauh lebih mudah dipahami dan dipelihara menggunakan Definisi Tipe. Anda dapat mematuhi prinsip-prinsip pengembangan berorientasi objek dan menggunakan struktur seperti Antarmuka untuk mengatur kode Anda dengan cara yang meminimalkan kopling.

f. Masalah penggunaan TypeScript diselesaikan.

Mengingat bahwa kami sebelumnya telah berbicara tentang kelebihan TypeScript, mari pelajari lebih lanjut tentang kekurangannya agar lebih siap untuk mengadopsinya.

g. Kurva untuk belajar

Memulai menggunakan TypeScript mungkin sulit karena kurva pembelajaran yang curam, terutama jika tenaga kerja Anda hanya memiliki pengalaman dengan JavaScript dasar. Tindakan terbaik dalam situasi ini adalah mengadopsi adaptasi progresif yang dijelaskan di atas.

Tetapi jika grup sudah berpengalaman dengan bahasa yang diketik secara dinamis, seperti Java atau C#Understanding TypeScript tidak terlalu rumit.

h. Definisi Jenis hilang dari pustaka pihak ketiga.

Ini adalah keadaan yang tidak biasa mengingat semakin populernya TypeScript. Namun, dokumentasi resmi TypeScript menawarkan saran yang berguna jika Anda menemukan Perpustakaan yang tidak memiliki Definisi. Mengutip ini.

saya. Periode komputasi

Secara alami, dibutuhkan beberapa milidetik lagi untuk menyusun kode sumber karena harus melewati lapisan transpiring tambahan. Tetapi sebagian besar waktu, ini tidak akan terlihat. Keuntungannya dalam hal keahlian pengembangan dan kurang rentan terhadap masalah akan lebih besar daripada kekurangannya yang membutuhkan usaha lama.

Membungkus

Ini adalah hubungan antara penderitaan jangka pendek dan imbalan jangka panjang. Saat Anda memulai proyek TypeScript, Anda mungkin merasa sangat sulit dan memakan waktu untuk membuat semua alat pembuatnya. Namun, seiring pertumbuhan aplikasi Anda, Anda akan menemukan bahwa boilerplate ini sangat membantu dan mempercepat serta mengurangi kemungkinan kesalahan. Kami harap artikel ini menangkap Anda dengan luar biasa dan membantu Anda mengenali nilai penggunaan TypeScript dalam proyek React Anda.