Bagaimana Sistem Jenis Meningkatkan Kode JavaScript Anda

Jadi Anda tidak punya waktu untuk berbalik, dan bulan sudah berusaha untuk menyelesaikannya. Beberapa hari tersisa sampai peluncuran utas baru pada kursus "Pengembang JavaScript" , menurut tradisi, sebelum memulai kursus kami akan membagikan terjemahan materi yang bermanfaat kepada Anda.

JavaScript vanilla tidak diketik secara alami. Anda bahkan dapat memanggilnya "pintar," karena ia dapat menghitung apa itu angka dan apa itu string.

Ini membuatnya lebih mudah untuk menjalankan kode JavaScript di browser atau ketika menjalankan Node.js. Namun, ini rentan terhadap banyak kesalahan runtime (runtime), yang dapat merusak pengalaman pengguna Anda.



Jika Anda pernah terjadi dengan apa yang akan dijelaskan nanti, maka Anda hanya akan mendapatkan jika Anda menggunakan sistem tipe.

• Setelah menerima daftar data, Anda menemukan bahwa bidang tertentu tidak ada di salah satu catatan. Ini menyebabkan kegagalan aplikasi jika kasus ini tidak ditangkap dan tidak diproses secara eksplisit.
• Instance dari kelas yang Anda impor tidak memiliki metode yang Anda coba panggil.
• IDE Anda tidak tahu metode dan properti apa yang tersedia untuk modul dan pustaka, sehingga tidak dapat menawarkan penyelesaian otomatis secara efisien.

Flow, TypeScript atau ReasonML

Katakanlah Anda memiliki basis kode yang sudah ada yang ingin Anda buat lebih andal dan stabil. Mempertimbangkan kesalahan pengetikan yang ada, Anda dapat mencoba menggunakan Flow atau TypeScript untuk ini (mereka memiliki sintaks yang sangat mirip).

Di sisi lain, menggunakan masing-masing alat besar ini rumit. Anda akan memuat diri Anda dengan pekerjaan membuat jenis dan antarmuka untuk kode yang belum pernah dikembangkan sebelumnya.

Namun demikian, Flow dan TypeScript tidak memberikan keamanan 100% saat menambahkan mengetik kode.
Karena alasan ini, keamanan pengetikan yang ideal dicapai melalui inferensi dan membuat anotasi variabel dan tanda tangan fungsi lebih sederhana.

Contoh sederhana dan jelas dibuat

Pertimbangkan kode berikut:

let add = (a, b) => a + b; 

Dalam JavaScript biasa, argumen ini bisa berupa angka atau string. Dalam TypeScript atau Flow, argumen ini dapat dijelaskan sebagai:

 let add = (a: number, b: number) => a + b 

Sekarang kita tampaknya menetapkan tepat dua nilai int. Bukan dua pelampung atau dua string, operator lain digunakan untuk operasi tambahan mereka.

Sekarang mari kita lihat contoh yang sedikit dimodifikasi di Alasan:

 let add = (a: string, b: number) => a + b add('some string', 5) // outputs: "some string5" 

Fitur ini berfungsi! Dan itu mungkin tampak mengejutkan. Bagaimana Reason memahami hal ini?

 let add = (a, b) => a + b; add("some string", 5); /* This has type: string but somewhere wanted: int */ 

Fitur ini memiliki kekurangan di tingkat implementasi. Reason memiliki operator yang berbeda untuk menambahkan int, float, dan string.

Tujuan dari contoh sederhana ini adalah untuk menunjukkan bahwa ada kemungkinan "kesalahan ketik" tambahan bahkan jika ini tidak menjatuhkan aplikasi.

Dalam program Alasan, pengembang tidak harus berurusan dengan bug produksi yang muncul karena ketidakcocokan jenis atau nilai nol.

Pengalaman Pengembang

Salah satu fitur terbaik di TypeScript adalah Anda melihat saran untuk perbaikan atau penyelesaian otomatis di editor kode.

Ini adalah salah satu area di mana TypeScript didahulukan dari Alasan, karena program TypeScript tidak harus dikompilasi dengan sempurna untuk menawarkan pelengkapan otomatis. Alasan akan memaksa Anda untuk memperbaiki semua kesalahan dalam sintaks dan tipe sebelum menawarkan Anda perbaikan yang bermanfaat.

Ini adalah cara kerjanya di VSCode, tapi saya tahu banyak pengembang Alasan yang menggunakan vim. Di sini kita tidak akan membandingkan.

Meskipun saya penggemar berat Reason, saya juga menulis aplikasi dalam TypeScript atau Flow. Gelombang hype di sekitar TypeScript memberikan insentif yang baik untuk memilihnya, karena ini, ia memiliki dukungan komunitas yang hebat.

Alasan, di sisi lain, lebih sulit digunakan karena lebih sedikit artikel dan dokumentasi yang tersedia. Saya berharap bahwa dengan perkembangannya ini akan diperbaiki.

Jika Anda tertarik pada Alasan, Anda dapat menemukan dokumentasinya di sini . Dan ikuti orang-orang seperti @jordwalke , @jaredforsyth , dan @sgrove di Twitter. Mereka dapat bercerita banyak tentang ekosistem Alasan / OCaml.

Jika Anda ingin tahu bagaimana Reason bekerja dengan GraphQL, lihat artikel saya yang lain, "Reason with GraphQL, Masa Depan Aplikasi Web Jenis-Aman" .

Kami menunggu umpan balik tentang materi tersebut dan, sesuai dengan tradisi yang ada, kami mengundang semua pembaca ke hari terbuka , yang akan diadakan pada 25 Maret oleh guru kami, Alexander Korzhikov .