### **Konversi JavaScript ke TypeScript**
Pada tahap ini, kita akan mempelajari bagaimana mengonversi proyek JavaScript ke TypeScript. Proses konversi ini membantu dalam meningkatkan keterbacaan kode dan meminimalisir kesalahan yang mungkin terjadi di JavaScript. TypeScript memungkinkan kita menambahkan **static typing** dan berbagai fitur lainnya tanpa mengubah perilaku runtime JavaScript.Berikut adalah langkah-langkah dan praktik terbaik untuk mengonversi kode JavaScript ke TypeScript.
## **Langkah-Langkah Konversi JavaScript ke TypeScript**
### 1. **Install TypeScript**
Untuk memulai konversi dari JavaScript ke TypeScript, pastikan terlebih dahulu bahwa Anda telah menginstal TypeScript di sistem Anda.
#### Cara Install TypeScript:
```bash
npm install -g typescript
Setelah terinstal, Anda dapat memverifikasi instalasi dengan perintah berikut:
```bash
tsc --version
### 2. **Menambahkan TypeScript ke Proyek**
Jika Anda bekerja dalam proyek JavaScript yang sudah ada, tambahkan TypeScript ke dalam proyek dengan perintah berikut:
```bash
npm install --save-dev typescript
#### **Buat File Konfigurasi `tsconfig.json`**:
File `tsconfig.json` digunakan untuk mengkonfigurasi bagaimana proyek TypeScript dikompilasi.
Untuk membuat file ini, jalankan:
```bash
tsc --init
Ini akan membuat file `tsconfig.json` yang bisa Anda sesuaikan. Contoh sederhana `tsconfig.json`:
```json
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"strict": true,
"esModuleInterop": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
```
- **`target`**: Versi ECMAScript yang dihasilkan (misalnya ES6).
- **`module`**: Sistem modul yang digunakan (misalnya CommonJS untuk Node.js).
- **`strict`**: Mengaktifkan pemeriksaan tipe ketat.
- **`include`**: Direktori dan file yang akan dikompilasi.
- **`exclude`**: File atau direktori yang tidak ingin dikompilasi, seperti `node_modules`.
### 3. **Ganti File `.js` menjadi `.ts`**
Ubah ekstensi file JavaScript dari `.js` menjadi `.ts`. TypeScript bisa langsung bekerja dengan kode JavaScript standar, sehingga Anda bisa mengganti ekstensi file terlebih dahulu untuk mulai menggunakan TypeScript tanpa masalah.
#### Contoh:
- `app.js` → `app.ts`
### 4. **Menambahkan Tipe pada Variabel dan Fungsi**
Setelah mengubah file menjadi `.ts`, Anda bisa mulai menambahkan **type annotations** pada variabel, parameter fungsi, dan tipe pengembalian fungsi. Ini adalah langkah penting dalam konversi ke TypeScript.
#### Contoh Konversi Variabel:
Kode JavaScript:
```javascript
let nama = "Budi";
let umur = 21;
```
Setelah dikonversi ke TypeScript:
```typescript
let nama: string = "Budi";
let umur: number = 21;
#### Contoh Konversi Fungsi:
Kode JavaScript:
```javascript
function tambah(a, b) {
return a + b;
}
```
Setelah dikonversi ke TypeScript:
```typescript
function tambah(a: number, b: number): number {
return a + b;
}
```
- Parameter `a` dan `b` sekarang bertipe `number`.
- Fungsi dikonfigurasi untuk mengembalikan nilai bertipe `number`.
### 5. **Menambahkan Tipe pada Objek dan Array**
Anda juga dapat mendefinisikan tipe pada objek dan array untuk memastikan struktur data selalu sesuai dengan yang diharapkan.
#### Contoh Konversi Objek:
Kode JavaScript:
```javascript
let mahasiswa = {
nama: "Budi",
umur: 21,
jurusan: "Teknik Informatika"
};
```
Setelah dikonversi ke TypeScript:
```typescript
interface Mahasiswa {
nama: string;
umur: number;
jurusan: string;
}
let mahasiswa: Mahasiswa = {
nama: "Budi",
umur: 21,
jurusan: "Teknik Informatika"
};
```
Di sini kita membuat **interface** `Mahasiswa` untuk mendefinisikan struktur objek `mahasiswa`.
#### Contoh Konversi Array:
Kode JavaScript:
```javascript
let angka = [1, 2, 3, 4, 5];
```
Setelah dikonversi ke TypeScript:
```typescript
let angka: number[] = [1, 2, 3, 4, 5];
```
Array `angka` sekarang memiliki tipe `number[]` yang memastikan hanya angka yang dapat masuk ke dalam array ini.
### 6. **Menggunakan `any` Saat Tipe Tidak Diketahui**
Jika Anda menghadapi situasi di mana tipe data belum jelas atau bervariasi, Anda dapat menggunakan tipe `any` sebagai tipe umum sementara. Namun, penggunaan `any` sebaiknya diminimalkan karena akan menghilangkan keuntungan dari pemeriksaan tipe di TypeScript.
#### Contoh:
```typescript
let data: any = "Budi";
data = 42; // Tidak ada error karena tipe any
### 7. **Mengonversi Callback dan Fungsi Asynchronous**
Jika kode Anda menggunakan callback atau fungsi asynchronous, TypeScript memungkinkan untuk mendefinisikan tipe parameter yang diterima dalam callback.
#### Contoh Callback:
JavaScript:
```javascript
function requestData(callback) {
callback("data sukses");
}
```
TypeScript:
```typescript
function requestData(callback: (data: string) => void): void {
callback("data sukses");
}
Untuk fungsi asynchronous dengan `async/await`, TypeScript mendukung penambahan tipe yang menentukan jenis data yang akan dikembalikan oleh promise tersebut.
#### Contoh Async/Await:
JavaScript:
```javascript
async function getUser() {
return { id: 1, name: "Budi" };
}
```
TypeScript:
```typescript
interface User {
id: number;
name: string;
}
async function getUser(): Promise<User> {
return { id: 1, name: "Budi" };
}
```
Fungsi `getUser` dijelaskan sebagai mengembalikan sebuah **Promise** dengan tipe `User`.
### 8. **Menambahkan Tipe pada Class**
Jika proyek JavaScript Anda menggunakan class, TypeScript menyediakan cara untuk menambahkan **static typing** pada class tersebut.
#### Contoh Konversi Class:
JavaScript:
```javascript
class Orang {
constructor(nama, umur) {
this.nama = nama;
this.umur = umur;
}
perkenalan() {
console.log(`Halo, nama saya ${this.nama}`);
}
}
```
TypeScript:
```typescript
class Orang {
nama: string;
umur: number;
constructor(nama: string, umur: number) {
this.nama = nama;
this.umur = umur;
}
perkenalan(): void {
console.log(`Halo, nama saya ${this.nama}`);
}
}
```
Sekarang, class `Orang` menggunakan tipe yang jelas untuk properti dan metode.
### 9. **Gunakan `strict` Mode untuk Memaksimalkan Keamanan Tipe**
Pada tahap konversi ini, pastikan **mode strict** diaktifkan dalam `tsconfig.json`. Mode strict memaksa TypeScript untuk lebih ketat dalam pemeriksaan tipe dan menangani potensi kesalahan lebih awal.
Dalam file `tsconfig.json`, pastikan `strict` diset menjadi `true`:
```json
{
"compilerOptions": {
"strict": true
}
}
```
Mode strict membantu Anda menghindari bug dan kesalahan runtime yang tidak terdeteksi dalam JavaScript biasa.
### 10. **Compile TypeScript ke JavaScript**
Setelah konversi selesai, Anda bisa mengompilasi file `.ts` menjadi file `.js` yang bisa dijalankan di browser atau server. Gunakan perintah berikut untuk mengompilasi:
```bash
tsc
```
File `.ts` akan dikompilasi menjadi JavaScript, dan Anda bisa menjalankan hasil kompilasinya.
## **Praktik Terbaik dalam Konversi JavaScript ke TypeScript**
1. **Mulai Perlahan**: Ubah satu file pada satu waktu, uji setelah setiap perubahan. Mulailah dengan mengonversi modul-modul yang sederhana dan perlahan-lahan tambahkan fitur TypeScript di modul yang lebih kompleks.
2. **Gunakan `any` dengan Bijak**: Hindari menggunakan tipe `any` terlalu sering karena ini akan mengurangi manfaat pemeriksaan tipe di TypeScript.
3. **Gunakan `ts-ignore` Hanya Saat Diperlukan**: Jika Anda tidak yakin tentang tipe atau mendapatkan error yang sulit diatasi, Anda bisa menggunakan komentar `// @ts-ignore` untuk mengabaikan pemeriksaan tipe di baris tertentu. Namun, gunakan ini sebagai solusi sementara.
4. **Refactor Secara Berkala**: Setelah konversi, refactor kode Anda untuk memanfaatkan fitur lanjutan TypeScript seperti **Generics**, **Enums**, dan **Interfaces**.
Dengan memahami langkah-langkah di atas, Anda dapat secara bertahap mengonversi proyek JavaScript yang ada menjadi TypeScript, meningkatkan
keterbacaan, keamanan, dan produktivitas Anda dalam pengembangan proyek.