Bahasa pemrograman TypeScript Pengganti JavaScript

Bahasa pemrograman TypeScript memiliki banyak keunggulan dibandingkan JavaScript bagi para pengembang. Fungsionalitas tambahan yang disediakan TypeScript memungkinkan kamu membangun aplikasi dan situs web interaktif yang lebih kompleks dengan sedikit bug.

TypeScript juga memiliki ekosistem besar dengan alat pengembang yang menyediakan dokumentasi sebaris dan pemeriksaan kode langsung. Hal ini memudahkan untuk menemukan kesalahan pengkodean saat kamu bekerja.

Artikel ini menjelaskan apa itu TypeScript dan hubungannya dengan JavaScript, serta menyediakan sumber daya untuk membantu kamu memulai membangun aplikasi frontend dan backend.

TypeScript adalah bahasa dengan tipe statis dan merupakan superset dari JavaScript yang dibangun di atas sintaksis dan fungsionalitas JavaScript yang sudah ada. Ini berarti kamu dapat menggunakan JavaScript dalam kode TypeScript.

Tetapi tidak sebaliknya, kamu tidak dapat menggunakan TypeScript dalam kode JavaScript karena kode yang ditulis dalam TypeScript menggunakan fitur dan sintaksis yang tidak ada dalam JavaScript.

TypeScript harus dikompilasi ke JavaScript agar dapat berjalan di peramban web dan di lingkungan seperti Node.js. Setelah kode TypeScript dikompilasi ke JavaScript, kode JavaScript yang dihasilkan tidak boleh diedit secara langsung.

Alur kerja untuk membangun aplikasi TypeScript adalah menulisnya dalam TypeScript, mengompilasinya ke JavaScript, lalu menyebarkannya.

Bahasa pemrograman TypeScript tidak akan begitu populer jika dikenal sebagai Bahasa pemrograman baru, tetapi karena dikompilasi ke JavaScript sehingga dapat berjalan pada sistem yang sudah ada, TypeScript telah diadopsi secara luas.

Ekstensi file untuk TypeScript adalah .ts. Berikut adalah contoh file yang diberi nama index.ts dengan beberapa kode dasar TypeScript :

undefined let message: string = "Hello, World!";

function greeting () {
console.log(message);
}

greeting();

Jika diperhatikan meskipun sintaksnya sangat mirip dengan JavaScript, ada sesuatu yang berbeda terlihat dalam contoh kode diatas, variabel message diikuti oleh titik dua (:) dan tipenya — dalam kasus ini TypeScript — memungkinkan kita menentukan bahwa pesan harus berupa string, dan tidak dapat mengambil nilai dengan tipe yang berbeda.

TypeScript dinamakan demikian karena fitur utamanya adalah memperkenalkan keamanan tipe pada JavaScript. Dalam contoh di atas, tipe string diberlakukan untuk variabel pesan, jadi tidak ada nilai numerik atau tipe nilai lainnya yang dapat digunakan di sana.

Hal ini mungkin tampak membatasi, tetapi sebenarnya sangat bermanfaat bagi pengembang.

Keamanan tipe dan pemeriksaan waktu kompilasi mengurangi kemungkinan terjadinya kesalahan pemrograman

Pertimbangkan skenario ini, jka kamu mengambil nilai dari dua input teks HTML dan ingin menambahkannya. JavaScript membaca nilai ini sebagai string (ini adalah kotak teks!). Hasilnya adalah seperti dibawah ini :

undefined let a = "2"; // Assuming the value has been read from a text input
let b = "5";
console.log(a + b); // Result is "25"

Kode ini akan berjalan tanpa peringatan atau kesalahan apa pun, dengan nilai dari kotak teks diperlakukan sebagai string, yang berarti nilai-nilai tersebut dirangkai alih-alih ditambahkan menggunakan operasi aritmatika, yang mengarah ke hasil yang tidak diinginkan yaitu “25” alih-alih angka 7.

Hal ini merupakan sesuatu yang tidak baik jika kamu sedang membangun website ecommerce sehingga kamu akan membebankan biaya berlebihan kepada pelanggan !

Kasus ini menunjukkan mengapa keamanan tipe itu penting. Di bawah ini, tipe variabel yang ditambahkan tipe ke dalamnya :

undefined let a: number = "2";
let b: number = "2";
console.log(a + b);

Jika kamu mencoba mengkompilasi dan menjalankan kode ini, maka kode tersebut tidak akan berhasil. Tetapi, kamu malah akan mendapatkan kesalahan :

Type ‘string’ is not assignable to type ‘number’

Ini memberi tahu bahwa kamu telah salah mencoba menetapkan nilai string ke variabel numerik, sehingga kamu harus memperbaikinya. Misalnya, dengan mengubah string secara eksplisit menjadi angka.

Dengan mencegah kamu mengompilasi dan menjalankan kode jika terdapat kesalahan ketik di dalamnya, TypeScript membuat aplikasi yang lebih mudah di-debug, dan lebih andal bagi pengguna.

Kamu tidak perlu menentukan tipe variabel saat bekerja di TypeScript. Kamu dapat mendeklarasikan dan menggunakan variabel tanpa tipe yang ditentukan, dan TypeScript akan menyimpulkan tipe berdasarkan nilai dan penggunaan.

Hal ini berguna saat memasukkan kode JavaScript yang tidak diketik untuk digunakan dalam proyek TypeScript. Jika kamu ingin mencobanya sendiri, TypeScript Playground memungkinkan kamu menulis dan menguji kode TypeScript langsung di peramban kamu, tanpa perlu dikompilasi.

Tipe, kelas, dan antarmuka khusus menjaga data kamu tetap konsisten

TypeScript memperluas dukungan JavaScript untuk pemrograman berorientasi objek dengan dukungan untuk tipe kustom, serta peningkatan pada kelas, antarmuka, dan pewarisan.

• Membangun tipe objek dan antarmuka memungkinkan kamu memodelkan data dalam TypeScript untuk memastikan bahwa data kamu diproses dan disimpan dengan benar.
• Kelas dan pewarisan memungkinkan kode yang bersih dan prinsip DRY, menjaga basis kode kamu jauh lebih terorganisir daripada yang dimungkinkan oleh JavaScript.

Enum dan tipe literal membuat kode kamu lebih mudah dipahami

Dengan TypeScript , Enum membuat kode kamu lebih mudah dibaca dan dipahami dengan memberi nama pada nilai yang mungkin tidak jelas (ambigu).

Misalnya, anggaplah kamu menyimpan status pesanan dalam basis data sebagai nilai numerik untuk menghemat ruang dan mempercepat pencarian. Alih-alih ” pending,”, ” paid,”, dan ” shipped,”, kamu dapat menyimpan nilai-nilai tersebut sebagai angka 0, 1, dan 2, masing-masing.

Efeknya adalah kode kamu akan menjadi membingungkan karena angka-angka tersebut tidak benar-benar menjelaskan banyak hal. Selanjutnya, kamu mungkin lupa angka mana yang sesuai dengan status yang mana, dan menggunakan angka yang salah. Enums menawarkan solusi yang mudah :

undefined enum OrderStatus {
pending,
paid,
shipped,
}

Dalam enum di atas, “pending” memiliki nilai 0, “paid” bernilai 1, dan ” shipped” bernilai 2. Saat menggunakan enum, kamu merujuk ke nilainya berdasarkan nama, dan nilai indeks akan dikembalikan :

console.log(OrderStatus.paid); // Will output 1

Tipe literal dan gabungan memberlakukan nilai tertentu untuk variabel. Misalnya, kamu mungkin memiliki fungsi yang hanya mengharapkan untuk menerima nilai “cat” atau “dog”:

undefined function myFunction(pet: "cat" | "dog") {
console.log(pet);
}

Jika kode kamu memberikan nilai selain “cat” atau “dog” ke fungsi ini, kesalahan akan muncul. Ini membantu memastikan lebih banyak masalah terdeteksi selama pengembangan.

Kamu dapat menulis fungsi yang mengharapkan input tertentu dengan mengetahui bahwa jika ada bug yang diberikan dan memberikan nilai yang tidak diharapkan. Sehingga, aplikasi kamu tidak akan dikompilasi.

Kode TypeScript perlu dikompilasi menjadi JavaScript agar dapat dijalankan di peramban web dan Node.js. Untuk itu, kamu perlu menginstal kompiler TypeScript.

Kamu dapat menginstal TypeScript secara global menggunakan perintah npm berikut.

npm install -g typescript

Setelah terinstal, kamu dapat menjalankan perintah kompilasi tsc TypeScript dari mana saja di terminal selama menggunakan npx :

tsc index.ts

Perintah di atas akan mengkompilasi berkas TypeScript index.ts dan menghasilkan berkas JavaScript terkompilasi bernama index.js.

TypeScript benar-benar hebat saat membangun aplikasi multi-halaman dan situs web yang kompleks. Sebagian besar pengembang tidak akan menggunakannya untuk hal-hal mendasar seperti menambahkan interaktivitas ke halaman web Tunggal.

Tetapi pengembang akan menggunakannya untuk membangun aplikasi besar dengan React atau Angular.

Banyak pengembang menggunakan editor kode yang mendukung integrasi TypeScript sehingga mereka dapat memanfaatkan pelengkapan kode, dokumentasi sebaris, dan penyorotan kesalahan untuk menyederhanakan proses pengembangan dan debugging mereka.

Bisakah saya menggunakan kode JavaScript yang sudah ada?

Ya! TypeScript kompatibel dengan JavaScript. kamu dapat menggunakan kode JavaScript lama dan terus menggunakannya dalam proyek TypeScript, lalu memfaktorkan ulang dari waktu ke waktu untuk memanfaatkan fungsionalitas TypeScript yang baru.

Membangun front end dengan TypeScript untuk browser

React adalah pustaka yang membantu kamu membangun antarmuka pengguna untuk front-end. Pustaka ini menyediakan fondasi bagi kamu untuk membangun komponen yang dapat digunakan kembali, memodulasi, dan menyederhanakan pengembangan aplikasi.

Pustaka ini juga memungkinkan kamu membuat halaman dinamis yang dapat berinteraksi dengan pengguna dengan menampilkan, menyembunyikan, memindahkan, dan mengubah tampilan konten di layar.

Aplikasi React dapat ditulis dalam TypeScript, kombinasi ini merupakan toolchain yang populer dan canggih bagi pengembang front-end.

Angular adalah framework lengkap yang menggunakan TypeScript untuk membangun komponen-komponennya. Ia membawa hal-hal lebih jauh dari React, Selain menyediakan alat untuk membangun antarmuka pengguna, ia menyediakan framework untuk keseluruhan aplikasi.

Pendekatan Angular yang bagus memungkinkan pengembang untuk membangun lebih cepat, asalkan konsep aplikasi mereka sesuai dengan arsitektur Angular.

Baik React maupun Angular dapat digunakan untuk membangun aplikasi TypeScript untuk Ionic dan Electron. Ionic memungkinkan kamu membangun aplikasi seluler untuk iOS dan Android menggunakan TypeScript.

Sedangkan Electron memungkinkan kamu menyematkan aplikasi web di aplikasi desktop untuk Windows, Linux, dan MacOS.

Menyebarkan backend TypeScript ke server

TypeScript tidak terbatas pada pembuatan aplikasi frontend. Tetapi TypeScript juga dapat digunakan dengan Node.js untuk mengembangkan layanan backend dan aplikasi command line.

Kamu juga dapat menggunakan TypeScript dengan kerangka kerja web Fastify, atau menggunakan kerangka kerja khusus TypeScript seperti Nest untuk membangun API yang aman terhadap tipe.

TypeScript hadir dengan banyak fitur yang berguna bagi para pengembang, dan mempelajari serta mengimplementasikan semuanya sekaligus meski terasa sangat merepotkan. Namun, karena dukungannya terhadap kode JavaScript yang ada, kamu tidak perlu mengimplementasikan setiap fitur TypeScript sekaligus.

Salah satu caranya adalah mempelajari beberapa fitur TypeScript, lalu menerapkannya pada kode JavaScript kamu, fungsi per fungsi, dan setelah selesai, pilih kumpulan konsep TypeScript lain untuk diimplementasikan dan diulang.

Hal ini membantu memigrasi basis kode kamu ke TypeScript dengan upaya minimal dan membantu kamu mendalami konsep tersebut lebih dalam.

TypeScript Handbook merupakan tempat yang bagus untuk mempelajari cara membuat aplikasi dalam TypeScript. Buku ini menjelaskan konsepnya dengan baik dan berisi contoh-contoh yang relevan. Buku ini juga diperbarui secara berkala dengan informasi baru tentang apa itu TypeScript dan apa fungsinya.

Itulah artikel Bahasa pemrograman TypeScript Pengganti JavaScript yang dapat Mangcoding sharing. Mudah-mudahan artikel ini bisa bermanfaat dan dapat memberikan pengetahuan baru untuk Anda. Jika ada kritik serta saran yang dapat membangun, silahkan komentar atau kirim melalui Email dan Media sosial Mangcoding.

Sumber : Bahasa pemrograman TypeScript Pengganti JavaScript