Apa Itu TypeScript? Panduan Bahasa Mudah untuk Bukan Pembangun

TypeScript ialah JavaScript dengan jenis. Anda menambah label yang menyatakan jenis data apa yang sepatutnya dimiliki setiap nilai — nombor, teks, senarai pesanan — dan TypeScript menyemak kod anda untuk ketidakpadanan sebelum ia dijalankan. Laman TypeScript menerangkannya sebagai "JavaScript dengan sintaks untuk jenis"; jenis-jenis itu dibuang apabila kod ditukar kepada JavaScript biasa, yang kemudiannya berjalan di mana sahaja JavaScript berjalan.

Mengapa ia penting apabila anda membina dengan AI

Model AI menulis kod dengan pantas, dan kod yang pantas mempunyai kesilapan: medan bernama customerName dalam satu fail dan customer_name dalam fail lain, harga dihantar sebagai teks dan bukannya nombor, fungsi dipanggil tanpa nilai yang diperlukan. Dalam JavaScript biasa, banyak kesilapan itu hanya muncul apabila seseorang mengklik butang yang salah.

TypeScript menangkap ramai daripadanya lebih awal, semasa kod sedang ditulis:

• AI mendapat maklum balas serta-merta. Ralat jenis menunjuk ke baris tepat yang salah, supaya ejen boleh membetulkannya sebelum anda melihatnya.
• Perubahan lebih selamat. Namakan semula medan, dan TypeScript menandakan setiap tempat yang masih menggunakan nama lama.
• Kod menerangkan dirinya sendiri. Jenis mendokumentasikan apa yang dijangka dan dikembalikan oleh fungsi, yang membantu anda, AI dan mana-mana pembangun yang bekerja padanya kemudian.
• Editor lebih pintar. Pelengkapan automatik dan "pergi ke definisi" berfungsi lebih baik kerana editor tahu apa itu setiap nilai.

Ini sebab besar mengapa ramai pembina app AI menjadikan TypeScript sebagai lalai.

Analogi harian

Bayangkan sebuah gudang penghantaran dengan petak berlabel. Setiap petak mempunyai papan tanda: "Palet sahaja", "Bahan sejuk", "Maks 500 kg". Apabila penghantaran tiba, seorang pemeriksa di pintu membandingkan barang dengan papan tanda itu. Ikan beku yang menuju ke petak barangan kering dihentikan di pintu, bukan ditemui seminggu kemudian apabila ia berbau.

TypeScript ialah pemeriksa di pintu itu. Jenis ialah papan tanda. Pemeriksaan berlaku sebelum barangan — kod anda — digunakan. Dan apabila semuanya sudah di tempatnya, papan tanda itu ditanggalkan: JavaScript yang berjalan tidak mempunyai jenis lagi di dalamnya.

Cara TypeScript berfungsi

1. Anda (atau AI) menulis fail .ts atau .tsx — TypeScript, dengan label jenis.
2. Pemeriksa jenis membaca kod dan melaporkan ketidakpadanan sebagai ralat dalam editor atau pembinaan.
3. Langkah pembinaan membuang jenis, menghasilkan JavaScript biasa.
4. JavaScript berjalan dalam pelayar atau pada pelayan (Node.js, Deno, Bun).

Akibat penting: TypeScript menyemak kod yang anda tulis, bukan data yang tiba semasa app berjalan. Jika API luaran menghantar sesuatu yang tidak dijangka, TypeScript tidak dapat melihatnya melainkan anda menambah pengesahan semasa runtime.

Contoh kerja: borang tempahan

Katakan anda sedang membina app tempahan untuk salon rambut. Berikut ialah jenis yang menerangkan satu tempahan:

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

Dan fungsi yang mengira deposit:

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

Sekarang lihat apa yang TypeScript tangkap.

Medan yang disalah eja.

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

TypeScript melaporkan bahawa prise bukan sifat yang diketahui dan price tiada. Dalam JavaScript biasa, ini akan diam-diam mengira deposit sebagai NaN (bukan nombor).

Jenis nilai yang salah.

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

TypeScript melaporkan bahawa rentetan tidak boleh digunakan di tempat nombor diperlukan. Tanpanya, "40" * 0.2 kebetulan berfungsi, tetapi "40" + 5 menghasilkan "405" — jenis kesilapan yang muncul pada invois.

Perkhidmatan yang tidak wujud.

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

TypeScript melaporkan bahawa "perm" bukan salah satu perkhidmatan yang dibenarkan. Apabila salon kemudian menambah perm, anda menambahnya pada jenis, dan TypeScript menunjukkan setiap tempat yang perlu dikemas kini — senarai harga, borang, warna kalendar.

Apa yang ia tidak dapat tangkap. Jika borang tempahan menghantar price: "40" dari pelayar ke pelayan, TypeScript pada pelayan tidak nampak perkara itu semasa runtime. Sebab itulah app yang dibina dengan baik juga mengesahkan data yang masuk, selalunya dengan pustaka pengesahan yang menyemak bentuknya dan menukarnya kepada Booking yang betul.

TypeScript berbanding JavaScript

Istilah biasa dijelaskan

Kesilapan dan salah faham yang biasa

• "TypeScript menjadikan kod bebas pepijat." Ia menangkap ketidakpadanan dalam bentuk data, bukan logik yang salah. Deposit 2% dan bukannya 20% tetap lulus semakan jenis.
• "Jenis melindungi saya daripada input yang buruk." Jenis hilang semasa runtime. Sahkan data daripada pengguna, borang dan API.
• any di mana-mana. Apabila AI tersekat, ia mungkin mencapai any atau // @ts-ignore untuk menyenyapkan ralat. Itu menyembunyikan masalah dan bukannya membetulkannya.
• Mengabaikan ralat jenis kerana pratonton berfungsi. Sesetengah alat masih menjalankan kod dengan ralat jenis. Ralat itu tetap pepijat yang menunggu untuk berlaku.
• "TypeScript lebih perlahan." Jenis dibuang sebelum dijalankan; JavaScript yang berjalan pada asasnya sama.
• "Ia hanya untuk pasukan besar." Pembina solo juga mendapat manfaat, terutamanya apabila AI melakukan kebanyakan suntingan.

Apa yang perlu diminta daripada pembina AI anda

• "Gunakan TypeScript dengan mod ketat dihidupkan."
• "Takrifkan jenis kongsi untuk rekod utama kami — Customer, Booking, Invoice — dan gunakannya pada kedua-dua bahagian hadapan dan belakang."
• "Jangan gunakan any atau @ts-ignore untuk melepasi ralat; betulkan punca masalah dan beritahu saya apa itu."
• "Sahkan semua data yang masuk di pelayan, bukan sekadar dengan jenis."
• "Jalankan pemeriksa jenis dan betulkan setiap ralat sebelum anda beritahu saya ia selesai."
• "Apabila anda menamakan semula medan, kemas kini setiap tempat yang ditandakan TypeScript."
• "Terangkan ralat jenis ini dalam bahasa Inggeris biasa."

Untuk lebih lanjut tentang menyemak apa yang dihasilkan AI, lihat cara menyemak kod yang dijana AI dan cara menyahpepijat app yang dibina dengan AI.

TypeScript dalam Mythex

Apabila anda tidak meminta apa-apa yang khusus, Mythex memulakan projek baharu dengan Vite + React + TypeScript + Tailwind. Editor kod termasuk kecerdasan bahasa — pelengkapan, diagnostik dan pergi-ke-definisi untuk TypeScript dan JavaScript, antara bahasa lain — jadi ralat jenis kelihatan dalam kod, bukan sekadar dalam pratonton. Editor hanya baca pada Free dan boleh disunting sepenuhnya pada Pro. Anda masih boleh meminta persediaan yang berbeza dalam arahan pertama anda; halaman dokumentasi tentang cara teknologi dipilih menerangkan caranya, dan dokumentasi editor kod meliputi apa yang ditunjukkan oleh editor.

Soalan lazim