Dari JavaScript ke TypeScript: Panduan untuk Pemula

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

Apa Itu TypeScript?

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

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

Bayangkan Anda sedang membangun sebuah rumah. JavaScript seperti membangun dengan blok Lego - fleksibel dan menyenangkan, tapi kadang-kadang hal-hal tidak cocok dengan benar. TypeScript seperti menggunakan blok Lego dengan petunjuk detil - Anda tahu tepat mana piece mana yang harus 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 Ditingkatkan: 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. Daya Baca yang Ditingkatkan: Anotasi tipe membuat kode lebih self-dokumenter 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. Instal 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. Ganti 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 yang berikut:

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

Konfigurasi ini memberitahu TypeScript bagaimana mengkompilasi kode Anda. Itu seperti memberikan petunjuk kepada koki tentang 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 memperingatkan kita. Itu seperti memiliki teman yang membantu yang memantau Anda dan mengatakan, "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. Hal ini membantu mencegah kesalahan seperti secara tidak 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. Hal ini membantu memastikan bahwa person selalu memiliki properti yang benar dengan tipe yang benar.

5. Tangani Tipe Any

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

6. Gunakan Fitur Khusus TypeScript

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

Enums

enum Color {
Red,
Green,
Blue
}

let favoriteColor: Color = Color.Blue;

Enums memungkinkan kita mendefinisikan setan konstanta yang diberi nama. 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 adalah number atau string, tapi tidak ada yang lain!"

7. Gradualmente Tingkatkan Kekerasan

TypeScript memiliki beberapa flag kekerasan yang Anda dapat aktifkan di tsconfig.json. Mulai dengan pengaturan yang kurang keras 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. Refaktor dan Optimalkan

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

Kesimpulan

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

TypeScript mungkin tampak menakutkan pada awal, tapipercayalah, sekali Anda menguasainya, Anda akan bertanya-tanya bagaimana Anda bisa hidup tanpanya. Itu seperti meningkat dari sepeda ke motor - ada kemiringan belajar, tapi kekuatan dan kecepatan yang Anda peroleh adalah luar biasa.

Terus latih, tetap bersemangat, dan yang paling penting, bersenang-senang! Sebelum Anda sadari, Anda akan menulis TypeScript seperti seorang ahli. Selamat coding!

Credits: Image by storyset