Alat JavaScript Flow dan TypeScript serupa dalam banyak aspek. Namun, mereka berbeda dalam hal fungsionalitas dan kemampuannya sebagai pemeriksa statis.
Cari tahu bagaimana Flow dan TypeScript membandingkan dan mana pemeriksa statis terbaik untuk proyek Anda berikutnya.
Apa Itu Arus?
Flow adalah alat pemeriksa tipe statis untuk JavaScript, yang dibuat oleh Facebook untuk mengidentifikasi kesalahan kode kompilasi dan run-time sebelumnya. Ini dilakukan dengan memantau nilai yang dilewati kode Anda dan bagaimana tipe datanya berubah seiring waktu. Sistem pemeriksaan statis ini meningkatkan keandalan dan keterbacaan. Ini juga membantu mengurangi terjadinya bug dalam kode JavaScript Anda.
Apa itu TypeScript?
TypeScript bukan hanya pemeriksa tipe, seperti Flow, tetapi bahasa pemrograman yang diketik dengan kuat. Microsoft menciptakan bahasa, membangunnya di atas JavaScript.
Secara konvensi, Anda harus membuat file TypeScript dengan ekstensi file .ts. Anda dapat mengkompilasi file TypeScript ke dalam kode JavaScript, jadi di mana pun JavaScript dijalankan, TypeScript juga dapat dijalankan.
Mengonfigurasi Alur untuk Aplikasi JavaScript Anda
Anda dapat mengintegrasikan Flow ke dalam framework JavaScript apa pun yang Anda putuskan untuk digunakan untuk proyek Anda. Anda harus mengonfigurasi kompiler JavaScript seperti Babel untuk menangani semua jenis aliran dalam kode Anda dan mengompilasinya menjadi JavaScript vanilla.
Untuk menginstal Flow di proyek Anda, jalankan perintah berikut:
penambahan benang --dev aliran-bin
Selanjutnya, Anda harus menginstal antarmuka baris perintah Flow secara global. CLI ini menyediakan beberapa perintah untuk membangun aplikasi flow.
Di macOS, gunakan Homebrew untuk menginstal Flow CLI:
buatan Install flow-cli
Anda perlu tahu cara menggunakan Windows PowerShell untuk menginstal Flow pada mesin Windows.
Untuk menginstal Flow CLI di Windows, jalankan skrip ini di terminal PowerShell Anda:
iex "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"
Proyek aliran membutuhkan a .flowconfig file untuk semua konfigurasi alat yang diperlukan.
Jalankan perintah ini untuk membuat file konfigurasi Flow di proyek baru atau yang sudah ada:
npm jalankan aliran init
Ketahuilah bahwa kerangka kerja tertentu mungkin mengirimkan proyek dengan file konfigurasi Flow secara default.
Hal terakhir yang harus dilakukan adalah menambahkan skrip Flow ke file Anda package.json mengajukan:
"skrip": {
"mengalir": "mengalir"
},
Anda sekarang telah berhasil mengonfigurasi Flow untuk berjalan di aplikasi JavaScript Anda.
Menyiapkan TypeScript di Proyek Anda
Jalankan perintah berikut untuk menginstal TypeScript di proyek Anda:
npm Install naskah --save-dev
Anda juga harus menginstal kompiler untuk mengkompilasi kode TypeScript ke dalam vanilla JavaScript. Anda mungkin juga perlu siapkan konfigurasi TypeScript untuk alur kerja yang lebih baik pengalaman.
Instal kompiler TypeScript secara global dengan perintah ini:
npm Install -g naskah
Untuk menginisialisasi a tsconfig.json config, masukkan perintah berikut ke terminal Anda:
tsc --init
Instruksi di atas akan membantu Anda mulai menggunakan TypeScript di proyek Anda.
Membangun Dengan Aliran
Untuk menulis kode Flow dalam file JavaScript, nyatakan sintaks Flow di bagian atas kode sebelum ekspresi atau pernyataan apa pun:
// @mengalir
Anda dapat mengatur tipe data variabel dan fungsi menggunakan anotasi. Flow kemudian akan menimbulkan error jika tipe yang diantisipasi tidak terpenuhi.
Misalnya:
// @mengalir
biarkan foo: nomor = "Halo";
Aliran akan menimbulkan kesalahan di sini karena jenis nilai yang diharapkan dari foo adalah angka, bukan string.
Berlari npm menjalankan aliran untuk melihat keluaran kesalahan di terminal:
Mengaktifkan ekstensi Flow di dalam editor teks apa pun pilihan akan menunjukkan kesalahan di editor Anda saat Anda membuat kode.
Flow juga menggunakan inferensi tipe untuk menentukan nilai yang diharapkan dari sebuah ekspresi.
Misalnya:
// @mengalir
fungsilakukan sesuatu(nilai) {
mengembalikan nilai * "Halo";
};
membiarkan hasil = lakukan Sesuatu(6);
Anda tidak dapat menjalankan operasi aritmatika antara angka enam dan string Halo.
Keluaran dari npm menjalankan aliran akan menjadi kesalahan:
Berkembang Dengan TypeScript
Sintaks tipe TypeScript sangat mirip dengan Flow. Anda dapat menentukan tipe variabel dan fungsi dengan anotasi tipe seperti yang Anda lakukan di Flow.
TypeScript dikirimkan dengan beberapa fitur lain yang mirip dengan Flow, seperti inferensi tipe.
Ambil contoh kode TypeScript:
// TypeScript.ts
ketik Hasil = "lulus" | "gagal"
fungsimemeriksa(hasil: Hasil) {
jika (hasil "lulus") {
konsol.log("Lulus")
} kalau tidak {
konsol.log("Gagal")
}
}
Anda bisa lari tsc TypeScript.ts untuk mengkompilasi kode ini ke JavaScript vanilla biasa.
Ini akan menjadi kode TypeScript yang sama yang dikompilasi menjadi vanilla JavaScript:
fungsimemeriksa(hasil) {
jika (hasil "lulus") {
konsol.log("Lulus")
} kalau tidak {
konsol.log("Gagal")
}
}
Pro dan Kontra dari TypeScript dan Flow
Sekarang Anda tahu cara mulai menggunakan kedua alat di proyek JavaScript Anda. Anda harus mengetahui pro dan kontra menggunakan masing-masing.
Integrasi
Proses penyiapan untuk menggunakan Flow agak lebih rumit dibandingkan dengan TypeScript. Anda perlu menyiapkan kompiler JavaScript seperti Babel atau flow-remove-types untuk menghapus tipe aliran dari kode Anda. TypeScript menyertakan kompiler untuk mengonversi kode TypeScript ke JavaScript, membuat integrasi menjadi lebih mudah.
TypeScript memiliki perkakas yang jauh lebih baik dan sebagian besar kerangka kerja JavaScript mendukungnya secara default. IDE paling populer memberikan dukungan kelas satu untuk TypeScript. Aliran juga didukung tetapi membutuhkan plug-in khusus.
Masyarakat
Tidak seperti Flow, framework JavaScript seperti React, React Native, Vue, dan Angular mendukung TypeScript secara langsung.
Adopsi yang meluas dan komunitas yang besar ini menghasilkan sumber belajar, pembaruan, dan dukungan alat yang lebih baik.
Fleksibilitas
Flow bertindak sebagai pemeriksa jenis yang berfungsi untuk memperingatkan Anda tentang kode yang berpotensi buruk. TypeScript mencegah Anda menulis kode yang buruk dan memiliki sistem tipe yang ketat. TypeScript juga mendukung enkapsulasi objek, yang membantu menjaga kode kompleks tetap dapat dikelola. Flow tidak memiliki fitur ini.
Jasa
TypeScript menyediakan semua layanan bahasa JavaScript, seperti pemfaktoran ulang kode dan pelengkapan otomatis. Flow adalah pemeriksa tipe statis yang memberikan pemahaman mendalam dan analisis kode tertulis Anda.
Flow dapat berfungsi hingga ke modul dan pustaka yang diimpor proyek Anda dan melihat bagaimana pengaruhnya terhadap kode Anda. Misalnya, ini dapat mendeteksi dan melontarkan peringatan saat pustaka yang diperlukan dalam proyek Anda hilang atau saat Anda mencoba mengakses definisi yang tidak ada.
Pemeriksa Statis Mana Yang Harus Anda Gunakan?
Ada banyak argumen yang valid untuk menggunakan setiap alat karena masing-masing memiliki fitur yang berbeda. Beberapa mungkin menjadi prioritas utama untuk satu pengembang dan prioritas rendah untuk yang lain. Kedua alat bekerja dengan baik dalam hal mereka sendiri dan menawarkan keuntungan untuk menggunakannya.
Anda harus memeriksa persyaratan proyek Anda dan membuat keputusan berdasarkan informasi tersebut.
