TypeScript: Menangkap Kesalahan Sebelum Sampai Produksi · 1/8

Kenapa type itu ada

Bug yang bisa ditangkap type, bug yang tidak bisa, dan apa yang dijanjikan (dan tidak) oleh "berhasil compile".

Baca 18 menit

Setelah pelajaran ini kamu bisa

Menyebutkan jenis bug yang ditangkap type checker sebelum kamu menjalankan apa pun
Menyebutkan jenis yang tidak bisa ditangkapnya
Menjelaskan apa yang dijanjikan dan tidak dijanjikan oleh "berhasil compile"
Menjelaskan kenapa hampir seluruh industri beralih ke TypeScript

TypeScript adalah JavaScript plus deskripsi tentang bentuk datamu. Sebuah program terpisah — type checker — membaca deskripsi itu dan memberitahumu di mana kodemu bertentangan dengan dirinya sendiri, bahkan sebelum kamu menjalankannya.

Bug yang seharusnya ditangkap type

Coba sendiri

JavaScript biasa, tanpa error, tanpa peringatan — dan jawaban yang sepenuhnya salah terkirim ke pelanggan.

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

NaN dan "31". Tidak ada yang crash. Keduanya bisa sampai ke invoice pelanggan. Type checker menolak mengompilasi keduanya, di editor, tepat saat kamu mengetiknya.

interface Booking {
  nights: number;
  pricePerNight: number;
}

function calculateTotal(booking: Booking) {
  return booking.nights * booking.pricePerNigth;
  //                              ~~~~~~~~~~~~~~
  // Property 'pricePerNigth' does not exist on type 'Booking'.
  //   Did you mean 'pricePerNight'?
}

calculateTotal({ nights: "3", pricePerNight: 850000 });
//               ~~~~~~
// Type 'string' is not assignable to type 'number'.

Kedua bug dilaporkan sebelum file-nya pernah dijalankan, lengkap dengan saran perbaikannya.

Apa yang ditangkap type

Tertangkap sebelum jalan	Tidak tertangkap — tetap tugasmu
Nama property salah tulis	Logika bisnis yang salah tapi lolos type-check
Mengirim string di tempat yang butuh number	API yang mengembalikan hal berbeda dari yang dijanjikan
Lupa menangani `undefined`	Data yang tidak valid tapi bentuknya benar
Memanggil function dengan argument terlalu sedikit	Race condition dan bug urutan
Melewatkan satu kasus di sebuah union	Apa pun soal performa
Memakai field yang sudah diganti nama setelah refactor	Apakah fiturnya sesuai keinginan pengguna

Bagian yang tidak disebut orang pertama kali

Menangkap salah ketik itu manfaat yang dipromosikan. Manfaat yang lebih besar, begitu codebase-nya besar, adalah type membuat perubahan jadi aman. Ganti nama sebuah field dan compiler-nya mendaftar keempat puluh tempat yang harus ikut berubah. Tanpa daftar itu, kamu pakai cari-dan-ganti lalu berharap.

Autocomplete editor yang benar-benar akurat. Editormu tahu field-nya ada, jadi ia bisa menawarkannya.
Dokumentasi yang tidak bisa usang. Signature type itu diperiksa; komentar tidak.
Refactor yang aman. Compiler-nya adalah daftar semua yang kamu rusak.
Onboarding. Developer baru bisa membaca type-nya untuk memahami bentuk sistemnya.

Tugas praktik

Di proyek ini, buka features/curriculum/types.ts dan baca LearningModule. Sekarang buka features/curriculum/modules.ts dan hapus field stage dari salah satu modul. Simpan, lalu jalankan bunx tsc --noEmit. Baca error-nya, lalu kembalikan. Kamu baru saja memakai compiler sebagai daftar tugas.

Hasil yang diharapkan

Error yang menyebutkan property yang hilang serta file dan barisnya secara tepat.