Dari JavaScript ke TypeScript: Panduan untuk Pemula

Hai sana, bintang coding masa depan! Saya sangat senang menjadi panduanmu dalam perjalanan menarik ini dari JavaScript ke TypeScript. Sebagai seseorang yang telah mengajar ilmu komputer selama bertahun-tahun, saya telah melihat banyak siswa membuat transisi ini, dan saya di sini untuk membuatnya semulus mungkin bagi Anda. Jadi, ambil minumannya yang favorit, duduk nyaman, dan mari kita masuk ke dalam!

Apa Itu TypeScript?

Sebelum kita mulai petualangan migrasi ini, mari kita pahami apa itu TypeScript dan mengapa ia menjadi semakin populer.

TypeScript adalah seperti sepupu yang lebih terorganisir dan disiplin JavaScript. Itu adalah superset JavaScript, yang berarti semua kode JavaScript yang valid juga valid sebagai kode TypeScript. Namun, TypeScript menambahkan tipe statik opsional dan fitur lain yang membuat menulis aplikasi skala besar menjadi lebih mudah dan kurang berisiko kesalahan.

Imaginasi Anda sedang membangun sebuah rumah. JavaScript seperti membangun dengan blok Lego - fleksibel dan menyenangkan, tapi kadang-kadang hal-hal tidak cocok sepenuhnya. TypeScript seperti menggunakan blok Lego dengan panduan detil - Anda tahu tepatnya mana piece yang akan ditempatkan, mengurangi kesempatan kesalahan.

Mengapa Migrasi dari JavaScript ke TypeScript?

Anda mungkin berpikir, "Jika JavaScript berjalan lancar, mengapa masalah dengan TypeScript?" Pertanyaan bagus! Berikut adalah beberapa alasan:

1. Kualitas Kode yang Diperbaiki: Tipe statik TypeScript membantu menangkap kesalahan awal dalam proses pengembangan.
2. Dukungan Peralatan yang Lebih Baik: IDE dapat menyediakan dukungan autocompletion dan refactoring yang lebih baik dengan TypeScript.
3. Kemudahan Bacaan: Anotasi tipe membuat kode menjadi lebih self-documenting dan mudah dipahami.
4. Perawatan yang Lebih Mudah: Ketika proyek tumbuh, fitur TypeScript membantu mengelola kompleksitas.

Sekarang kita tahu mengapa TypeScript bagus, mari kita mulai perjalanan migrasi kita!

Langkah-langkah Migrasi dari JavaScript ke TypeScript

1. Install TypeScript

Pertama-tama, kita perlu menginstal TypeScript. Buka terminal Anda dan jalankan:

npm install -g typescript

Perintah ini menginstal TypeScript secara global di komputer Anda. Sekarang Anda dapat menggunakan perintah tsc untuk mengkompilasi kode TypeScript.

2. Ubah Nama File .js Menjadi .ts

Langkah berikutnya adalah mengubah nama file JavaScript Anda dari .js menjadi .ts. Misalnya, app.js menjadi app.ts. Jangan khawatir, kode Anda masih akan berjalan!

3. Buat File tsconfig.json

Sekarang, mari kita buat file konfigurasi untuk TypeScript. Di root proyek Anda, buat file bernama tsconfig.json dan tambahkan hal berikut:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true
}
}

Konfigurasi ini memberitahu TypeScript bagaimana mengkompilasi kode Anda. Itu seperti memberikan petunjuk kepada koki bagaimana mempersiapkan makanan Anda!

4. Mulai Menambahkan Anotasi Tipe

Sekarang datang ke bagian yang menyenangkan - menambahkan tipe ke kode JavaScript Anda! Mari kita lihat beberapa contoh:

Contoh 1: Variabel

// JavaScript
let name = "Alice";
let age = 30;

// TypeScript
let name: string = "Alice";
let age: number = 30;

Dalam contoh ini, kita mengatakan kepada TypeScript bahwa name selalu harus string, dan age selalu harus number. Jika kita mencoba mengassign number ke name kemudian, TypeScript akan peringatkan kami. Itu seperti memiliki teman yang membantu yang memantau dan mengatakan, "Apakah Anda yakin ingin melakukan itu?"

Contoh 2: Fungsi

// JavaScript
function greet(name) {
return "Hello, " + name + "!";
}

// TypeScript
function greet(name: string): string {
return `Hello, ${name}!`;
}

Di sini, kita menentukan bahwa fungsi greet menerima parameter string dan mengembalikan string. Ini membantu mencegah kesalahan seperti secara tak sengaja mengirimkan number ke greet.

Contoh 3: Objek

// JavaScript
let person = {
name: "Bob",
age: 25
};

// TypeScript
interface Person {
name: string;
age: number;
}

let person: Person = {
name: "Bob",
age: 25
};

Dalam contoh ini, kita mendefinisikan sebuah interface Person yang menjelaskan bentuk objek kita. Ini membantu memastikan bahwa person selalu memiliki properti dengan tipe yang benar.

5. Tangani Tipe Any

Saat Anda migrasi, Anda mungkin menemukan tempat di mana TypeScript tidak dapat menarik kesimpulan tipe. Dalam kasus ini, Anda akan melihat tipe any. Meskipun menarik untuk menggunakan any di mana-mana, cobalah untuk menghindari itu jika memungkinkan. Sebaliknya, definisikan tipe yang sesuai atau interface.

6. Gunakan Fitur Khusus TypeScript

TypeScript menawarkan beberapa fitur yang tidak tersedia di JavaScript. Mari kita lihat beberapa contoh:

Enums

enum Color {
Red,
Green,
Blue
}

let favoriteColor: Color = Color.Blue;

Enums memungkinkan kita mendefinisikan sebuah set konstanta yang dinamai. Itu seperti membuat menu pilihan yang kita dapat pilih.

Tipe Union

function printId(id: number | string) {
console.log("Your ID is: " + id);
}

printId(101);  // OK
printId("202");  // Juga OK
printId(true);  // Kesalahan!

Tipe Union memungkinkan nilai untuk menjadi salah satu dari beberapa tipe. Itu seperti mengatakan, "Ini bisa either number atau string, tapi tidak ada yang lainnya!"

7. Perlahan-lahan Tingkatkan Keketatan

TypeScript memiliki beberapa flag ketat yang Anda dapat aktifkan di tsconfig.json. Mulai dengan pengaturan yang kurang ketat dan perlahan-lahan tingkatkan mereka saat Anda merasa nyaman dengan TypeScript.

Flag	Deskripsi
noImplicitAny	Buat kesalahan pada ekspresi dan deklarasi dengan tipe 'any' yang implisit
strictNullChecks	Aktifkan pemeriksaan null yang ketat
strictFunctionTypes	Aktifkan pemeriksaan tipe fungsi yang ketat
strictBindCallApply	Aktifkan pemeriksaan 'bind', 'call', dan 'apply' yang ketat pada fungsi
strictPropertyInitialization	Aktifkan pemeriksaan inisialisasi properti dalam kelas
noImplicitThis	Buat kesalahan pada ekspresi 'this' dengan tipe 'any' yang implisit
alwaysStrict	Parse dalam mode ketat dan kirimpkan "use strict" untuk setiap file sumber

8. Refactor dan Optimalkan

Saat Anda migrasi, Anda mungkin menemukan kesempatan untuk refaktor dan meningkatkan kode Anda. Tipe statik TypeScript dapat membantu Anda menangkap bug dan membuat kode Anda lebih kuat.

Kesimpulan

Selamat! Anda telah mengambil langkah pertama dalam migrasi dari JavaScript ke TypeScript. Ingat, ini adalah perjalanan, bukan balapan. Ambil waktu Anda, eksperimen, dan jangan takut membuat kesalahan - itu adalah bagaimana kita belajar!

TypeScript mungkin terlihat menakutkan pada awalnya, tapi percayalah, sekali Anda mengenalinya, Anda akan bertanya-tanya bagaimana Anda pernah hidup tanpanya. Itu seperti meningkat dari sepeda ke motor - ada sedikit curva belajar, tapi kekuatan dan kecepatan yang Anda peroleh adalah luar biasa.

Teruslatih, tetap curiga, dan terutama, bersenang-senang! Sebelum Anda sadari, Anda akan menulis TypeScript seperti seorang ahli. Selamat coding!

Credits: Image by storyset