Apa Itu TypeScript? JavaScript yang Dilengkapi Sistem Tipe

Kalau kamu sudah cukup lama berkecimpung di dunia pengembangan web, kata “TypeScript” pasti sering muncul. Ada di lowongan kerja, di tutorial, bahkan di layar awal hampir semua framework modern. Tapi begitu kamu bertanya sebenarnya itu apa, jawabannya biasanya cuma satu kalimat yang bikin bingung, atau malah satu paragraf penuh istilah teknis.

Di artikel ini kita bereskan itu. Setelah selesai membaca, kamu akan paham persis apa itu TypeScript, kenapa banyak tim memilih memakainya, dan apa sebenarnya yang ia lakukan terhadap kode kamu. Kamu tidak perlu pengalaman soal tipe sebelumnya. Asal bisa membaca sedikit JavaScript, kamu sudah siap.

Versi satu kalimatnya

TypeScript itu JavaScript ditambah sistem tipe.

Itu inti seluruhnya, sisanya cuma detail. Kamu menulis kode yang nyaris sama persis dengan JavaScript, tapi sekarang kamu boleh menambahkan catatan kecil yang menyebut setiap nilai itu sebenarnya jenis apa: angka, teks, daftar, dan seterusnya. TypeScript membaca catatan itu lalu memeriksa kode kamu sebelum dijalankan, menunjukkan kesalahan saat kamu masih mengetik, bukan setelah pengguna terkena dampaknya.

Begitu selesai, TypeScript membuang semua catatan tadi dan menyerahkan JavaScript biasa yang bisa berjalan di mana saja JavaScript bisa berjalan: di browser, di server, di mana pun. Jadi tipe membantu kamu selama membangun, lalu diam-diam menyingkir.

Kalau JavaScript sendiri masih terasa samar buat kamu, ada baiknya kenalan dulu dengan yang satu itu. Kami punya pengantar yang santai di sini: Apa Itu JavaScript?

Sebenarnya “tipe” itu apa?

Tipe itu sekadar label yang menjelaskan sebuah nilai itu apa. Angka 42 punya tipe “number”. Teks "halo" punya tipe “string” (programmer menyebut teks sebagai string, alias deretan karakter). true dan false punya tipe “boolean”.

Di JavaScript murni, nilai juga punya tipe, tapi JavaScript hanya memeriksanya saat program berjalan, dan ia terkenal santai soal mencampur-campur tipe. Perhatikan contoh ini:

let total = "5";
let hasil = total + 3;
console.log(hasil); // "53", bukan 8

JavaScript melihat sebuah string dan sebuah angka, lalu tanpa ragu menempelkannya menjadi "53". Tidak ada error, tidak ada peringatan. Mungkin memang itu yang kamu mau; tapi sering kali bukan, dan bug-nya lolos ke produksi tanpa ketahuan.

TypeScript membuat kamu bisa menyatakan maksud sejak awal. Kamu menempelkan tipe ke sebuah nilai memakai tanda titik dua:

let total: number = 5;
let hasil = total + 3; // 8, dan TypeScript menjamin total adalah number

Sekarang kalau ada yang mencoba memasukkan teks ke dalam total, TypeScript langsung protes, di editor kamu, lewat garis merah bergelombang, jauh sebelum kode dijalankan.

“Superset dari JavaScript” — maksudnya apa?

Kamu akan sering melihat TypeScript disebut sebagai superset dari JavaScript. Superset artinya “semua yang dimiliki aslinya, plus tambahan.” Setiap baris JavaScript yang sah juga merupakan TypeScript yang sah. TypeScript tinggal menambahkan fitur di atasnya, terutama anotasi tipe yang barusan kita lihat.

+-----------------------------------------+
|             TypeScript                  |
|   +---------------------------------+   |
|   |          JavaScript             |   |
|   |   (setiap JS sah = TS yang sah) |   |
|   +---------------------------------+   |
|   + tipe opsional, interface, ...   |   |
+-----------------------------------------+

Konsekuensi praktisnya menyenangkan: kamu tidak harus belajar bahasa yang benar-benar baru. Kalau kamu sudah tahu sedikit JavaScript, berarti kamu sudah tahu sebagian besar TypeScript. Kamu bisa mengganti nama berkas .js jadi .ts, dan biasanya tetap jalan. Dari situ kamu menambahkan tipe sedikit demi sedikit, sebanyak atau sesedikit yang kamu mau.

Pemeriksaan statis: menangkap bug sebelum terjadi

Bagian inilah yang bikin banyak orang jatuh cinta pada TypeScript.

Ketika kamu menandai tipe sebuah nilai, pemeriksaannya bersifat statis, artinya dilakukan sewaktu kamu menulis kode, cukup dengan membacanya, tanpa menjalankan apa pun. (Kebalikannya, pemeriksaan dinamis, baru menemukan masalah saat program benar-benar berjalan, sering kali di depan pengguna asli.)

Bayangkan sebuah fungsi kecil yang menyapa pengguna:

function sapa(user: { name: string; email: string }) {
  return "Halo, " + user.name;
}

sapa({ name: "Jane Doe", email: "jane@example.com" }); // aman
sapa({ name: "John Doe" }); // Error: properti 'email' tidak ada

Pemanggilan kedua lupa menyertakan kolom email. Di JavaScript murni, kesalahan itu lewat begitu saja dan mungkin baru meledak di tempat yang jauh, jauh kemudian. TypeScript menangkapnya seketika dan memberitahu persis apa yang kurang dan di mana.

Kalikan itu di sebuah basis kode dengan ribuan baris dan puluhan orang yang menyentuhnya, dan kamu mulai paham kenapa tim menghargainya: satu kelompok bug “ups, bentuknya salah” jadi tidak pernah sampai ke pengguna.

Kenapa TypeScript ada

JavaScript diciptakan pada pertengahan 1990-an untuk menambahkan sentuhan interaktif kecil pada halaman web. Tidak ada yang menyangka suatu hari ia akan menjalankan aplikasi raksasa, aplikasi mobile, sampai server backend utuh. Begitu proyek tumbuh dari beberapa ratus baris menjadi ratusan ribu, sifat santai JavaScript mulai terasa merepotkan. Fleksibilitas yang membuatnya cepat dimulai justru membuat program besar sulit dipercaya dan sulit diubah dengan aman.

TypeScript dibuat oleh Microsoft dan dirilis pada 2012 untuk menjawab persoalan itu. Tujuannya praktis:

• Menangkap kesalahan lebih awal, sewaktu menulis kode, bukan saat sudah produksi.
• Membuat alat bantu lebih pintar. Karena editor kini tahu bentuk data kamu, ia bisa menawarkan pelengkapan otomatis yang akurat, dokumentasi instan, dan penggantian nama otomatis yang aman.
• Mendokumentasikan kode lewat tipe. Tipe sebuah fungsi memberi tahu pembaca berikutnya apa yang ia harapkan dan kembalikan, tanpa satu komentar pun.
• Tetap 100% kompatibel dengan JavaScript, sehingga jutaan pustaka JS yang sudah ada tetap bisa dipakai.

Poin terakhir itu penting. TypeScript tidak pernah berniat menggantikan JavaScript atau memecah ekosistemnya. Ia menumpang di atasnya.

Bagaimana TypeScript sebenarnya dijalankan

Browser dan Node.js tidak memahami TypeScript secara langsung, mereka hanya menjalankan JavaScript. Jadi ada satu langkah tambahan antara menulis TypeScript dan menjalankannya, namanya kompilasi (kadang disebut “transpilasi”).

Kompiler TypeScript mengerjakan dua hal sekaligus dalam satu langkah:

1. Ia memeriksa tipe kamu dan melaporkan setiap error.
2. Ia membuang tipe-tipe itu lalu menghasilkan JavaScript biasa yang bersih.

  kode kamu (.ts)
        |
        v
  [ kompiler TypeScript ]  --> error tipe dilaporkan di sini
        |
        v
  JavaScript biasa (.js)  --> berjalan di browser / Node.js

Satu hal penting yang perlu dipahami: tipe hanya ada di tahap menulis. JavaScript yang dikirim ke pengguna kamu sama sekali tidak mengandung tipe lagi, karena tugasnya sudah selesai dan sudah dibuang. Inilah kenapa orang bilang tipe itu “dikompilasi habis”.

Sedikit cicipan sintaksnya

Kamu tidak perlu menghafal apa pun di sini. Cukup perhatikan betapa kecil tambahannya. Polanya hampir selalu nama: tipe.

// Variabel biasa
let umur: number = 30;
let username: string = "jane";
let isAdmin: boolean = false;

// Fungsi: tipe pada input dan pada hasilnya
function tambah(a: number, b: number): number {
  return a + b;
}

// Bentuk yang bisa dipakai ulang, dideskripsikan sekali lewat interface
interface User {
  name: string;
  email: string;
  age?: number; // tanda ? berarti yang ini opsional
}

const pelanggan: User = {
  name: "John Doe",
  email: "john@example.com",
};

interface di atas memberi nama pada satu bentuk objek tertentu, di sini bentuk sebuah User. Sekali kamu mendefinisikannya, kamu bisa memakainya ulang di mana-mana, dan TypeScript akan memastikan setiap User mengikuti bentuk yang persis itu. Tanda ? setelah age menandai kolom itu opsional, jadi tidak mengisinya pun sah-sah saja.

TypeScript vs JavaScript sekilas

Tidak ada yang “lebih baik” di setiap situasi. Untuk skrip mungil atau eksperimen cepat, JavaScript murni lebih gesit dibuat. Tapi untuk apa pun yang akan tumbuh, dirawat, atau disentuh lebih dari satu orang, jaring pengaman yang diberikan TypeScript biasanya berbalik untung berkali-kali lipat.

Layak dipelajari?

Untuk sebagian besar orang yang membangun untuk web modern, jawabannya iya. TypeScript sudah menjadi pilihan baku di sangat banyak basis kode profesional, dan framework-framework populer hadir dengan dukungan kelas satu untuknya sejak awal. Menguasainya makin lama makin diharapkan, bukan lagi sekadar nilai tambah.

Yang lebih penting, mempelajarinya juga membuat kamu jadi developer JavaScript yang lebih tajam. Membiasakan diri memikirkan bentuk data, apa yang masuk dan apa yang keluar, adalah kebiasaan yang memperbaiki kode kamu bahkan di hari-hari kamu sama sekali tidak menulis TypeScript.

Rangkuman

Mari kita ikat semuanya:

• TypeScript itu JavaScript dengan sistem tipe. Kamu menambahkan catatan kecil yang menjelaskan setiap nilai menyimpan jenis apa.
• Ia superset dari JavaScript. Setiap berkas JS yang sah adalah TS yang sah, jadi kamu membangun di atas yang sudah kamu tahu dan mengadopsi tipe secara bertahap.
• Ia memeriksa tipe secara statis, sewaktu kamu menulis, di editor, menangkap banyak kelompok bug sebelum kode dijalankan sama sekali.
• Ia ada agar basis kode besar bisa dipercaya: menangkap kesalahan lebih awal, menggerakkan alat bantu yang lebih pintar, dan mendokumentasikan maksud lewat tipe.
• Ia dikompilasi habis menjadi JavaScript biasa, jadi tidak menambah beban saat berjalan dan bisa jalan di mana saja JavaScript bisa.

Kalau kamu sudah nyaman dengan dasar-dasar JavaScript, lompatan ke TypeScript itu pendek dan sepadan. Mulai dari menambahkan satu tipe di sana-sini, biarkan editor menuntun kamu, dan kamu akan cepat merasakan kenapa begitu banyak developer enggan kembali.