Cara Mem-Port Program JavaScript Anda ke TypeScript
Table of content:
Awalnya dirilis pada tahun 1995 setelah periode pengembangan yang sangat singkat, JavaScript telah menjadi bagian integral dari banyak situs dan aplikasi. Hari ini, JavaScript telah menemukan rumah di aplikasi klien dan sisi server. Pengembang masih meminta banyak fitur, terlepas dari semua perubahan yang dialaminya selama bertahun-tahun.
TypeScript adalah bahasa skrip yang memperluas JavaScript dengan banyak fitur yang telah lama ditunggu-tunggu ini. Jenis anotasi, pengetikan khusus, dan antarmuka adalah komponen utama, bersama dengan alat yang lebih baik untuk meningkatkan produktivitas.
Mengapa repot-repot beralih?
Prospek mengganti bahasa pada proyek-proyek besar bisa membuat stres. Untungnya bagi siapa pun yang mempertimbangkan tugas tersebut, proses mem-porting proyek dari JavaScript ke TypeScript cukup sederhana.
Baca Juga:
JavaScript telah menghabiskan beberapa tahun terakhir untuk mendapatkan daya tarik sebagai bahasa pemrograman utama. Awalnya hanya digunakan untuk skrip front-end di situs web, rilis Node.js membawa sisi server JavaScript, membantu memperluas popularitasnya.
Meskipun JavaScript telah menjadi jauh lebih populer baru-baru ini, ada banyak fitur yang masih kurang dalam implementasi terbarunya, ES6. Bagi banyak pengembang, kekurangan fitur ini membatasi kegunaan JavaScript sebagai bahasa.
TypeScript bertujuan untuk memperbaiki masalah tersebut dengan membungkus JavaScript dengan fitur tambahan, lalu mengubah kode pengguna. Hasilnya adalah bahasa yang aman untuk tipe dengan kemudahan dan kegunaan JavaScript.
Sudah ada beberapa alat dan kerangka kerja di luar sana dengan dukungan penuh TypeScript. Angular telah menggunakannya sejak lama, dan bahkan React memiliki cara untuk mengimplementasikan TypeScript.
TypeScript Seperti JavaScript yang Ditingkatkan
TypeScript mengimplementasikan banyak fitur yang sering diminta pengembang dalam JavaScript. TypeScript dinamai untuk sistem tipe lengkap yang diimplementasikannya, termasuk fitur seperti pengecekan tipe, keamanan, dan pengetikan implisit. TypeScript bahkan memungkinkan Anda menentukan dan menggunakan ruang nama khusus.
TypeScript juga berisi antarmuka, enumerasi, dan inferensi tipe. TypeScript mempertahankan dukungan untuk fitur dari implementasi JavaScript terbaru di samping fitur lama, dan menambahkan serangkaian fitur baru.
Secara keseluruhan, fokus TypeScript adalah menciptakan proses pengembangan yang lebih aman dengan perkakas yang lebih kuat untuk membantu pembuat kode.
Ini Mendorong Kode Tipe-Aman
TypeScript menggunakan sistem pengecekan tipe bawaan untuk memvalidasi tipe variabel. Ini termasuk satu set tipe standar dengan opsi untuk menentukan kelas dan tipe Anda sendiri. Jenis dapat dideklarasikan secara eksplisit, atau disimpulkan berdasarkan penugasan.
TypeScript memiliki beberapa tipe data standar, termasuk string, angka, boolean, dan tupel. Ada juga tipe variabel, seperti tidak diketahui dan apa saja, yang memungkinkan Anda menggunakan kode yang diketik dengan lemah.
Inferensi tipe TypeScript memungkinkan Anda menjalankan pemeriksaan tipe bahkan pada kode JavaScript standar dengan menjalankannya melalui transpiler TypeScript.
Transpilasi Membuatnya Mudah Digunakan
Dari perspektif pengembang, salah satu fitur terbaik dari TypeScript adalah menghasilkan vanilla JavaScript. Anda dapat menjalankan kode TypeScript melalui proses yang dikenal sebagai transpilation, yang mirip dengan kompilasi.
Alih-alih dapat dieksekusi, hasil transpilasi adalah skrip dalam bahasa selain bahasa asli kode.
Kode TypeScript berubah menjadi JavaScript yang kemudian dapat Anda jalankan di server atau klien. Ini memungkinkan Anda menulis kode dengan cepat dan mudah yang dapat Anda jalankan di hampir semua platform.
TypeScript Membantu Produktivitas Pengembang
Menambahkan tipe ke JavaScript tidak hanya memungkinkan kode berjalan dengan aman, tetapi juga menyediakan alat bagi pengembang yang membuat pengkodean lebih mudah. Sebagian besar IDE modern menawarkan dukungan TypeScript yang memungkinkan alat penyelesaian kode seperti IntelliSense untuk menawarkan konteks tambahan pada kode. Itu juga dapat menawarkan pemeriksaan jenis saat Anda menulis, membantu Anda menemukan kesalahan lebih cepat.
Selain itu, struktur dan sintaks data ekstra TypeScript dirancang untuk meningkatkan keterbacaan kode. Fitur-fitur ini mempercepat dan mempermudah pembuatan kode berkualitas tinggi dan menemukan potensi masalah sebelum menjadi masalah.
Bagaimana Cara Mem-Port Kode Anda?
Jika Anda memulai proyek baru, membuat proyek TypeScript baru cukup sederhana. Namun, mengubah proyek yang sudah ada sebelumnya menjadi TypeScript sedikit lebih rumit.
Dalam sebagian besar keadaan normal, prospek mengubah proyek dari satu bahasa ke bahasa lain adalah sesuatu yang menakutkan. Namun, konversi dari JavaScript ke TypeScript ternyata sangat sederhana.
TypeScript sebagai Superset dari JavaScript
TypeScript dianggap sebagai superset dari JavaScript. Itu berarti bahwa TypeScript menambahkan lapisan sintaksis dan fungsionalitas tambahan, tanpa mengubah atau menghapus fungsionalitas inti yang dibuatnya.
Untuk pengembang, ini berarti kode apa pun yang berjalan dengan baik di JavaScript akan secara otomatis berjalan dengan benar di TypeScript. Baik skrip yang dimaksud adalah server web yang ditulis untuk dijalankan di NodeJS, atau sekumpulan skrip front-end untuk halaman web, beralih sangatlah sederhana.
Setelah menginstal transpiler TypeScript, Anda dapat membuat yang sederhana tsconfig.json file dengan konten berikut:
{
"compilerOptions": {
"outDir": "./build",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
Pindahkan file apa pun yang berlaku ke direktori src dan jalankan transpiler. Ini akan membuat file JavaScript yang dihasilkan di membangun direktori.
Perubahan cepat dan sederhana ini akan mengonversi proyek JavaScript standar menjadi proyek TypeScript. Dari sini, Anda bebas menggunakan fitur baru yang ditawarkan TypeScript sesuka Anda. Anda dapat membuat anotasi tipe pada variabel, mengimplementasikan tipe kustom, dan menentukan antarmuka.
Setelah setiap transpilasi, Anda dapat menggunakan output dari membangun direktori seperlunya dengan menambahkan file ke proyek apa pun seperti biasa. Transpiler akan mengetik periksa JavaScript standar dan mengonversi fitur baru menjadi skrip ES5 yang valid.
Yang Perlu Anda Ketahui untuk Berpindah Dari JS ke TS
Proses mengonversi proyek dari JavaScript ke TypeScript sangatlah mudah. Konversi semudah mengganti struktur direktori, menambahkan file konfigurasi, dan menginstal transpiler.
Mendapatkan semua manfaat dari bahasa baru, bagaimanapun, bisa menjadi proyek yang lebih lama. Sementara TypeScript dapat menyimpulkan jenis setiap variabel dalam sebuah proyek, ini harus dideklarasikan secara eksplisit. Kembali melalui dan menambahkan jenis kustom ke proyek, menambahkan anotasi yang tepat, dan membuat antarmuka dapat menghabiskan waktu.
Menambahkan fitur-fitur ini ke proyek, bagaimanapun, akan memungkinkan Anda untuk menuai manfaat yang datang dengan pengecekan tipe yang tepat dan perkakas yang diperluas. Proyek-proyek besar akan lebih cepat dan lebih mudah dibangun, Anda akan mengidentifikasi kesalahan lebih awal, dan pengembang baru akan lebih mudah membaca kode Anda.
Artikel Terkait
