Belajar TypeScript - Migrasi Kode JavaScript ke TypeScript

#Pendahuluan

Rasanya menggoda menulis ulang codebase JavaScript dari nol. Dalam praktik, itu mahal dan berisiko. Migrasi yang realistis berjalan bertahap: TypeScript diadopsi seraya aplikasi tetap berfungsi setiap hari. Episode 13 membahas cara melakukannya.

Kunci utamanya adalah mode campuran. TypeScript bisa memproses file JavaScript dan TypeScript dalam satu proyek, memberi tipe pada file yang sudah dikonversi sambil tetap menerima yang belum. Jaminan tipe dinaikkan secara bertahap, bukan dengan lonjakan.

Kalian akan belajar mengaktifkan allowJs dan checkJs, memulai pemeriksaan dengan JSDoc, memakai any sebagai jembatan sementara, lalu mengonversi file dan mengetatkan opsi sampai strict aktif.

#Strategi Bertahap dengan allowJs

Konversi dimulai dari pengaturan tsconfig. Opsi allowJs membuat compiler menerima file JavaScript:

{
    "compilerOptions": {
        "allowJs": true,
        "checkJs": false,
        "outDir": "dist"
    }
}

Dengan allowJs: true, file .js ikut disalin dan diproses, sehingga kalian bisa menambah file .ts di tengah proyek lama tanpa menunggu semuanya selesai. Kompilasi tetap berjalan, aplikasi tetap ter-deploy, dan migrasi berlangsung tanpa menghentikan pengembangan.

#checkJs dan Komentar Kontrol

Setelah stabil, aktifkan pemeriksaan pada file JavaScript:

{
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true
    }
}

Dengan checkJs: true, compiler mulai memeriksa file .js dan melaporkan kesalahan tipe yang bisa terdeteksi dari bentuk kode. Untuk file yang belum siap diperiksa, sisipkan komentar kontrol di bagian atas file:

Nonaktifkan pemeriksaan per file

// @ts-nocheck
 
function hitung(a, b) {
    return a + b;
}

Komentar // @ts-nocheck menonaktifkan pemeriksaan untuk satu file tertentu. Sebaliknya, // @ts-check mengaktifkan pemeriksaan pada file .js yang secara global nonaktif. Kedua komentar memberi kendali per-file selama masa transisi.

#JSDoc Sebagai Titik Awal

Sebelum mengubah ekstensi, kalian bisa mengetikkan fungsi dengan JSDoc:

Tipe lewat JSDoc

/**
 * Menjumlahkan dua angka.
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
function tambah(a, b) {
    return a + b;
}

Deklarasi @param {number} dan @returns {number} memberi tipe tanpa mengubah ekstensi file. JSDoc memanfaatkan checkJs, memberi keamanan lebih dulu, dan menjadi dokumentasi yang bisa dipindahkan otomatis saat file dikonversi.

#Memakai any yang Terkendali

Tidak semua kode langsung bisa diberi tipe akurat. any adalah jembatan yang sah selama migrasi:

function prosesData(data: any): any {
    return data.peta?.map((item: any) => item.nilai);
}

Deklarasi data: any menunda pengetikan detail sampai struktur data dipahami. Kuncinya terkendali: any hanya di file yang sedang ditangani, ditandai dengan komentar agar tidak lupa, dan dikurangi bertahap. Menggunakan any sementara jauh lebih baik daripada berhenti total.

rg "\bany\b" src --glob "*.ts"

Perintah rg \bany\b di atas mencari semua pemakaian kata kunci any di source. Daftar ini menjadi checklist pengurangan any sampai proyek layak masuk strict mode.

#Konversi dan Pengetatan Bertahap

Langkah berikutnya mengubah ekstensi file satu per satu, dari yang paling kecil dan paling terisolasi:

git mv src/utils/hitung.js src/utils/hitung.ts
npx tsc --noEmit

Perintah git mv mengganti ekstensi sambil menjaga riwayat git, lalu npx tsc --noEmit memverifikasi hasilnya. Konversi dimulai dari utilitas murni tanpa ketergantungan, naik ke modul yang memakai util itu, sampai akhirnya komponen paling atas.

#Penutup

Episode 13 menunjukkan bahwa migrasi ke TypeScript tidak harus menghentikan produksi. Dengan allowJs, checkJs, JSDoc, any yang terkendali, dan konversi bertahap, codebase lama bisa diamankan seraya tetap berjalan normal.

Inti yang harus dibawa pulang:

• allowJs membuat compiler memproses file JavaScript dan TypeScript bersamaan.
• // @ts-nocheck dan // @ts-check mengontrol pemeriksaan per file.
• JSDoc memberi tipe pada file .js tanpa mengubah ekstensi.
• any yang terkendali menjembatani file yang belum dikonversi.
• Konversi dimulai dari file kecil dan terisolasi.
• Pengetatan opsi strict dilakukan satu per satu.

Di episode 14 selanjutnya kita akan membahas deklarasi tipe untuk library eksternal, yaitu memakai paket @types, menulis deklarasi ambient, dan memahami module resolution.