Memahami Perbedaan Antara TypeScript dan JavaScript

Salah satu pertanyaan yang sering saya terima adalah, apa perbedaan antara JavaScript dan TypeScript?

Mari kita cari tahu…

Sejak Anda mulai coding, JavaScript (JS) akan menjadi bagian dari semua proyek front-end Anda. Jika Anda sedikit familiar dengan JS, anggap TypeScript sebagai JS ditambah beberapa fitur tambahan yang membuat aplikasi Anda lebih rapi dan mengetik . TypeScript dikembangkan sebagai proyek sumber terbuka oleh Microsoft untuk membuat pengembangan JS lebih efisien dan menangkap kesalahan kompilasi sejak dini.

Pada artikel ini, kita akan membahas beberapa fitur penting dari JavaScript dan TypeScript dan perbedaan antara kedua bahasa scripting.

Apa itu JavaScript?

JavaScript digunakan untuk skrip sisi klien. Anda dapat membuat skrip pada halaman HTML atau membuat file dengan ekstensi .js dan memasukkannya ke dalam file HTML Anda. Contoh umum di dunia nyata di mana Anda dapat melihat JavaScript adalah validasi halaman login, di mana Anda akan ditampilkan kesalahan saat nama pengguna/kata sandi Anda salah.

Mari kita menulis kode JS sederhana dan menjalankannya di browser:

Buat file example.html dan tambahkan kode berikut:

 <script> feeling = 'happy'; feeling = 23; </script>

Kode sederhana ini mendeklarasikan variabel dan memberikan nilai happy (string) padanya. Kita dapat menetapkan nilai dari tipe (angka) yang berbeda ke variabel yang sama. JavaScript tidak akan mengeluhkannya dan kami dapat menjalankan kode di browser apa pun tanpa masalah. Sekarang, mari kita dapatkan nilai perasaan dari pengguna:

HTML kita akan terlihat seperti ini:

 <input type = "textbox" id = "howyoufeel">

dan skripnya akan menjadi:

 feeling = document.getElementById("howyoufeel").value;

Kecuali kami melakukan pemeriksaan eksplisit dalam skrip, JS akan menerima nilai apa pun dari pengguna dan meneruskannya. Jadi, Anda dapat memasukkan sesuatu seperti 234, @.#$%, dll. ke dalam variabel perasaan.

Fitur JavaScript

Dari penjelasan di atas, kita dapat mengamati fitur-fitur JavaScript berikut:

• Bahasa skrip yang diketik dengan lemah
• Digunakan untuk skrip sisi klien dan sisi server (dengan node.js)
• Fleksibel dan dinamis
• Didukung oleh semua browser utama
• Ringan dan ditafsirkan

Jika Anda tertarik untuk menguasai JavaScript, lihat kursus Udemy ini.

Apa itu TypeScript?

Aplikasi dunia nyata akan memiliki banyak validasi dan pemeriksaan dinamis. Untuk aplikasi seperti itu, kode JavaScript akan menjadi sulit untuk diuji di beberapa titik, terutama karena tidak ada pemeriksaan tipe. Saat mendapatkan nilai dari pengguna, penting untuk melakukannya dengan benar di awal. Di sinilah TypeScript masuk.

TypeScript diketik dengan kuat dan memiliki kompiler yang mengeluh jika Anda tidak mendefinisikan jenis variabel.

Baik JavaScript dan TypeScript sesuai dengan spesifikasi ECMAScript untuk bahasa skrip. TypeScript dapat menjalankan semua kode JavaScript dan mendukung semua pustakanya – itulah mengapa disebut superset JavaScript.

Instalasi TypeScript

Untuk mengeksekusi kode sebelumnya di TypeScript, kita perlu menginstal compiler TypeScript menggunakan paket npm (jika Anda memiliki node js).

 npm install -g typescript

atau unduh langsung dari halaman unduhan resmi Microsoft. Anda juga dapat menggunakan taman bermain TS untuk melihat bagaimana kode dikompilasi dari ts ke js.

Setelah ini selesai, Anda dapat mengonfigurasi pengaturan proyek di tsconfig.json dan menggunakan IDE atau editor teks apa pun untuk menulis kode TypeScript dan menyimpannya sebagai .ts .

Anda masih bisa lolos dengan tidak mendefinisikan tipe variabel dan TypeScript dapat menyimpulkan tipe data. Namun, Anda akan mendapatkan kesalahan 'perasaan' jika Anda memberikan apa pun selain jenis yang digunakan pertama kali (dalam kasus kami, sebuah String) – selama kompilasi itu sendiri.

Itu selalu rapi untuk kode untuk memiliki anotasi tipe untuk pemeliharaan dan kemudahan penggunaan:

 var feeling: string = “happy”;

Bukan itu!

TypeScript menyediakan banyak fitur lain untuk membuat hidup pengembang lebih mudah.

Fitur TypeScript

TypeScript memiliki kumpulan fitur yang kaya dan setiap rilis dilengkapi dengan fitur baru untuk membuat pengembangan lebih mudah dari sebelumnya. Misalnya, dengan rilis baru (4.0), beberapa fitur tambahan adalah tipe tuple variadik, pabrik JSX kustom, inferensi properti kelas dari konstruktor, dll. Beberapa fitur khas TypeScript adalah:

• Mendukung konsep pemrograman berorientasi objek seperti antarmuka, pewarisan, kelas. obat generik
• Deteksi dini kesalahan
• Dukungan IDE dengan pemeriksaan sintaks dan saran
• Lebih mudah untuk di-debug saat diketik
• Trans-kompilasi ke dalam JavaScript
• Digunakan untuk aplikasi sisi server dan sisi klien
• Dukungan lintas platform dan lintas browser
• Mendukung semua perpustakaan dan ekstensi JS

Mengapa kita membutuhkan TypeScript? (Kelebihan TypeScript dibandingkan JavaScript)

Microsoft mengembangkan dan menggunakan TypeScript selama dua tahun untuk proyek internalnya sebelum dipublikasikan pada tahun 2012. Mereka membuat JavaScript yang diketik karena lebih mudah untuk menguji kode untuk aplikasi perusahaan tingkat produksi. Anda masih dapat menggunakan fitur pengetikan dinamis tetapi juga mengetikkan variabel ketika benar-benar diperlukan.

Pertimbangkan kode di bawah ini:

 var mynum = //get from user; addten(number){ return number + 10; }

Kami berharap hasilnya selalu berupa angka. Tapi, bagaimana jika pengguna memberikan "domba"? Outputnya akan menjadi sheep10 – idealnya, kita perlu memberi tahu pengguna bahwa operasi ini tidak mungkin!

Juga, ketika Anda memiliki informasi jenis yang tersedia, editor teks dan IDE menjadi lebih mudah untuk digunakan dan menyimpan kesalahan runtime. Juga lebih mudah untuk memfaktorkan ulang kode di lain waktu.

Apakah itu berarti kita tidak membutuhkan JavaScript? (Kekurangan TypeScript dibandingkan JavaScript)

Anda dapat menganggap TypeScript sebagai ekstensi JavaScript, tetapi tentu saja bukan pengganti.

Untuk potongan kode yang lebih kecil, TypeScript bisa menjadi overhead - menginstal, mengkompilasi, trans-kompilasi akan berlebihan. Dengan JavaScript, Anda cukup mengetikkan skrip Anda dalam HTML dan itu akan berhasil. Juga lebih mudah untuk men-debug kode ketika Anda cukup menyegarkan browser setiap kali Anda mengubah sesuatu.

Perbandingan head-to-head

Sekarang setelah kita memahami fitur dan keuntungan dari TypeScript dan JavaScript, mari kita lihat lebih banyak perbandingan:

Kesimpulan

Dari perspektif pembelajaran, JavaScript bisa menjadi pilihan alami Anda. Anda membuka file, ketik sesuatu di dalam <script></script> , simpan sebagai HTML – Anda akan melihat hasilnya! Anda kemudian dapat membangunnya untuk membuat konten yang lebih dinamis.

Selanjutnya, saat Anda mengerjakan aplikasi skala besar, memiliki pengetahuan JavaScript akan membantu Anda beralih ke TypeScript dengan mudah.

Namun, dari perspektif karier dan bayaran, sebagai pengembang TypeScript, Anda akan lebih fleksibel dan nyaman dengan proyek JS dan TS – jadi jelas merupakan aset yang lebih baik di pasar. Biasanya, pengembang TypeScript dibayar antara $110rb-$147rb, sedangkan pengembang JS dibayar sekitar $63rb-$118rb per tahun.