Apa Itu TypeScript? Panduan Sederhana untuk Non-Developer

TypeScript adalah JavaScript dengan tipe. Anda menambahkan label yang menyatakan jenis data setiap nilai — angka, teks, daftar pesanan — dan TypeScript memeriksa kode Anda dari ketidaksesuaian sebelum kode dijalankan. Situs TypeScript menggambarkannya sebagai "JavaScript dengan sintaks untuk tipe"; tipe-tipe itu dibuang saat kode diubah menjadi JavaScript biasa, yang kemudian berjalan di mana pun JavaScript berjalan.

Mengapa ini penting saat membangun dengan AI

Model AI menulis kode dengan cepat, dan kode yang cepat punya kesalahan: field bernama customerName di satu file dan customer_name di file lain, harga yang dikirim sebagai teks, bukan angka, fungsi yang dipanggil tanpa nilai yang diperlukan. Di JavaScript biasa, banyak kesalahan seperti itu baru terlihat ketika seseorang menekan tombol yang salah.

TypeScript menangkap banyak di antaranya lebih awal, saat kode sedang ditulis:

• AI mendapat umpan balik seketika. Error tipe menunjuk ke baris yang salah dengan tepat, sehingga agent bisa memperbaikinya sebelum Anda melihatnya.
• Perubahan lebih aman. Ganti nama sebuah field, dan TypeScript menandai setiap tempat yang masih memakai nama lama.
• Kode menjelaskan dirinya sendiri. Tipe mendokumentasikan apa yang diharapkan dan dikembalikan sebuah fungsi, yang membantu Anda, AI, dan developer mana pun yang mengerjakannya nanti.
• Editor jadi lebih pintar. Autocomplete dan "go to definition" bekerja lebih baik karena editor tahu jenis setiap nilai.

Ini alasan besar mengapa banyak AI app builder menjadikan TypeScript sebagai default.

Analogi sehari-hari

Bayangkan gudang pengiriman dengan petak-petak berlabel. Setiap petak punya papan: "Khusus palet", "Berpendingin", "Maks 500 kg". Ketika barang datang, petugas di pintu membandingkan barang dengan papan itu. Ikan beku yang hendak masuk ke petak barang kering dihentikan di pintu, bukan ditemukan seminggu kemudian saat sudah berbau.

TypeScript adalah petugas di pintu itu. Tipe adalah papan-papannya. Pemeriksaan terjadi sebelum barang — kode Anda — dipakai. Dan setelah semuanya di tempat, papan-papan itu dilepas: kode JavaScript yang berjalan tidak lagi memiliki tipe.

Cara kerja TypeScript

1. Anda (atau AI) menulis file .ts atau .tsx — TypeScript, dengan label tipe.
2. Type checker membaca kode dan melaporkan ketidaksesuaian sebagai error di editor atau build.
3. Langkah build menghapus tipe, menghasilkan JavaScript biasa.
4. JavaScript berjalan di browser atau di server (Node.js, Deno, Bun).

Konsekuensi penting: TypeScript memeriksa kode yang Anda tulis, bukan data yang masuk saat aplikasi berjalan. Jika API luar mengembalikan sesuatu yang tidak terduga, TypeScript tidak bisa melihatnya kecuali Anda menambahkan validasi saat runtime.

Contoh kerja: formulir pemesanan

Misalkan Anda membangun aplikasi pemesanan untuk salon rambut. Berikut tipe yang menjelaskan sebuah pemesanan:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // tanda ? berarti opsional
};

Dan sebuah fungsi yang menghitung uang muka:

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

Sekarang perhatikan apa yang ditangkap TypeScript.

Nama field yang salah ketik.

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScript melaporkan bahwa prise bukan properti yang dikenal dan price hilang. Di JavaScript biasa, ini diam-diam akan menghitung uang muka NaN (bukan angka).

Jenis nilai yang salah.

const booking: Booking = { ...otherFields, price: "40" };

TypeScript melaporkan bahwa string tidak bisa dipakai di tempat yang seharusnya angka. Tanpa itu, "40" * 0.2 kebetulan tetap berjalan, tetapi "40" + 5 menghasilkan "405" — jenis bug yang muncul di faktur.

Layanan yang tidak ada.

const booking: Booking = { ...otherFields, service: "perm" };

TypeScript melaporkan bahwa "perm" bukan salah satu layanan yang diizinkan. Saat salon nanti menambahkan perm, Anda menambahkannya ke tipe, dan TypeScript menunjukkan setiap tempat yang perlu diperbarui — daftar harga, formulir, warna kalender.

Yang tidak bisa ditangkapnya. Jika formulir pemesanan mengirim price: "40" dari browser ke server, TypeScript di server tidak melihatnya saat runtime. Itulah sebabnya aplikasi yang baik juga memvalidasi data yang masuk, sering kali dengan library validasi yang memeriksa bentuknya dan mengubahnya menjadi Booking yang benar.

TypeScript vs JavaScript

Istilah umum

Kesalahan umum dan kesalahpahaman

• "TypeScript membuat kode bebas bug." Ia menangkap ketidaksesuaian pada bentuk data, bukan logika yang salah. Uang muka 2% alih-alih 20% tetap lolos pemeriksaan tipe.
• "Tipe melindungi saya dari input yang buruk." Tipe menghilang saat runtime. Validasi data dari pengguna, formulir, dan API.
• any di mana-mana. Ketika AI kesulitan, ia bisa meraih any atau // @ts-ignore untuk membungkam error. Itu menyembunyikan masalah, bukan memperbaikinya.
• Mengabaikan error tipe karena preview tetap berjalan. Beberapa alat tetap menjalankan kode yang punya error tipe. Error itu tetap bug yang menunggu terjadi.
• "TypeScript lebih lambat." Tipe dihapus sebelum dijalankan; JavaScript yang berjalan pada dasarnya sama.
• "Hanya untuk tim besar." Pembuat solo juga mendapat manfaat, terutama ketika AI melakukan sebagian besar pengeditan.

Yang sebaiknya diminta ke AI builder Anda

• "Gunakan TypeScript dengan strict mode aktif."
• "Definisikan tipe bersama untuk catatan utama kami — Customer, Booking, Invoice — dan pakai di frontend maupun backend."
• "Jangan gunakan any atau @ts-ignore untuk melewati error; perbaiki masalah yang mendasarinya dan beri tahu saya apa masalahnya."
• "Validasi semua data masuk di server, bukan hanya dengan tipe."
• "Jalankan type checker dan perbaiki setiap error sebelum Anda memberi tahu saya bahwa pekerjaannya selesai."
• "Ketika Anda mengganti nama field, perbarui setiap tempat yang ditandai TypeScript."
• "Jelaskan error tipe ini dengan bahasa sederhana."

Untuk memeriksa apa yang dihasilkan AI, lihat cara meninjau kode yang dibuat AI dan cara men-debug aplikasi yang dibangun AI.

TypeScript di Mythex

Jika Anda tidak meminta sesuatu yang spesifik, Mythex memulai proyek baru dengan Vite + React + TypeScript + Tailwind. Editor kode menyertakan language intelligence — completion, diagnostik, dan go-to-definition untuk TypeScript dan JavaScript, di antara bahasa lainnya — sehingga error tipe terlihat di kode, bukan hanya di preview. Editor bersifat hanya-baca di Free dan sepenuhnya bisa diedit di Pro. Anda tetap bisa meminta setup yang berbeda di prompt pertama; halaman dokumentasi tentang cara teknologi dipilih menjelaskan caranya, dan dokumentasi editor kode membahas apa saja yang ditampilkan editor.

Pertanyaan