TypeScript vs JavaScript: Apa Bedanya?

Kalau kamu sempat melihat-lihat lowongan frontend atau proyek open-source belakangan ini, kemungkinan besar kamu menemukan dua nama yang sering muncul berdampingan: JavaScript dan TypeScript. Keduanya terdengar mirip, dan memang ada hubungannya. Tapi banyak orang malah jadi bingung, mengira keduanya adalah saingan yang harus dipilih salah satu, seolah dua bahasa berbeda yang berebut tempat yang sama.

Padahal bukan begitu ceritanya. Hubungan keduanya jauh lebih bersahabat. Di artikel ini kita akan membongkar pelan-pelan bagaimana keduanya terhubung, apa saja persamaannya, apa yang ditambahkan TypeScript di atasnya, dan kenapa setiap berkas TypeScript pada akhirnya berubah menjadi JavaScript biasa sebelum benar-benar dijalankan. Selesai membaca, kamu akan tahu mana yang sebaiknya dipelajari lebih dulu dan alasannya.

Sekilas mengingat lagi soal JavaScript

JavaScript adalah bahasa pemrograman yang berjalan di setiap peramban (browser) web. Saat sebuah tombol bereaksi ketika diklik, saat halaman berubah tanpa perlu dimuat ulang, saat formulir memeriksa isian kamu sebelum dikirim, biasanya JavaScript-lah yang sedang bekerja. Ia berjalan langsung: peramban membaca JavaScript kamu lalu mengeksekusinya saat itu juga, tanpa persiapan tambahan.

Salah satu ciri khas JavaScript adalah ia bersifat dynamically typed (bertipe dinamis). Istilahnya memang terdengar teknis, jadi mari kita pelankan. “Tipe” itu sederhananya jenis dari sebuah nilai, misalnya teks (string), angka (number), atau benar/salah (boolean). “Bertipe dinamis” artinya JavaScript tidak memaksa kamu menyebutkan jenis nilai itu di awal, dan ia juga tidak memeriksanya saat kamu menulis. Ia baru tahu sedang berurusan dengan jenis apa tepat ketika kode benar-benar dijalankan.

let total = 10;     // sebuah angka
total = "sepuluh";  // sekarang jadi teks — JavaScript mengizinkan ini
total = total * 2;  // tetap jalan, tapi hasilnya kacau

JavaScript dengan santai membiarkan semua itu terjadi. Ia tidak protes sampai ada yang rusak saat dijalankan, dan kadang malah tidak rusak sama sekali, ia diam-diam menghasilkan jawaban yang salah. Keleluasaan seperti ini terasa enak di skrip kecil, tapi mulai menyusahkan di proyek besar.

Kalau kamu ingin lebih dulu memahami bahasanya secara utuh, ini titik awal yang ramah: Apa Itu JavaScript?

Lalu, apa itu TypeScript?

TypeScript adalah bahasa pemrograman yang dibangun di atas JavaScript. Kata kunci yang akan sering kamu dengar adalah superset. Superset berarti TypeScript memuat seluruh JavaScript, lalu menambahkan lebih banyak lagi. Setiap berkas JavaScript yang valid sudah otomatis menjadi TypeScript yang valid. Kamu tidak membuang apa pun yang sudah kamu kuasai; kamu justru menumpuknya.

Yang ditambahkan TypeScript, terutama, adalah tipe statis. “Statis” di sini kebalikan dari “dinamis” tadi. Alih-alih baru tahu jenis sebuah nilai ketika kode berjalan, TypeScript membolehkan kamu menandai jenisnya sejak awal, lalu memeriksanya saat kamu menulis, sebelum apa pun dijalankan.

let total: number = 10;   // total dideklarasikan sebagai angka
total = "sepuluh";        // TypeScript langsung menghentikan kamu di sini

Baris kedua itu tidak akan pernah sampai ke peramban, karena TypeScript langsung menandainya sebagai kesalahan di editor kamu. Kamu menangkap kekeliruan itu sambil mengetik, bukan baru tahu dari pengguna yang kesal tiga minggu kemudian.

Bagian pentingnya: TypeScript berubah menjadi JavaScript

Ini ide yang mengikat semuanya, dan justru bagian inilah yang paling sering terlewat oleh pemula. Peramban tidak bisa menjalankan TypeScript. Peramban hanya mengerti JavaScript. Lalu bagaimana kode TypeScript bisa sampai ke sebuah halaman web?

Jawabannya adalah langkah kompilasi (sering disebut juga transpile). Sebelum kodemu mendekati peramban, sebuah alat bernama kompiler TypeScript membaca berkas-berkas .ts kamu, memeriksa semua tipenya, lalu mencabut informasi tipe itu, dan menghasilkan berkas .js biasa. Berkas JavaScript polos itulah yang sebenarnya dijalankan.

   kamu tulis         kompiler kerja          peramban jalankan
  ┌──────────┐        ┌──────────────┐        ┌──────────┐
  │  app.ts  │  ───▶  │ periksa tipe │  ───▶  │  app.js  │
  │ (bertipe)│        │  + cabut     │        │ (polos)  │
  └──────────┘        └──────────────┘        └──────────┘

Bayangkan tipe-tipe itu seperti perancah (scaffolding) di sekeliling bangunan. Perancah membantu kamu membangun semuanya dengan benar dan aman. Tapi begitu bangunannya berdiri, perancahnya dibongkar. Ia memang tidak pernah jadi bagian dari struktur akhir. Sama halnya, tipe TypeScript membantu kamu menulis kode yang benar, lalu lenyap saat kompilasi. Yang dikirim ke pengguna adalah JavaScript murni.

Inilah juga alasan orang bilang TypeScript tidak menambah fitur apa pun ke program yang berjalan. Saat dijalankan, aplikasi TypeScript dan aplikasi JavaScript yang setara berperilaku persis sama, karena keduanya memang JavaScript yang sama. Seluruh manfaatnya terjadi lebih awal, saat kamu menulis dan membangun.

Apa yang persis sama

Karena TypeScript adalah superset, sangat banyak hal yang terbawa tanpa perubahan sedikit pun. Semua ini ditulis dengan cara yang sama di keduanya:

• Variabel dengan let, const, dan var
• Fungsi, termasuk arrow function
• Pernyataan if, perulangan for dan while
• Array dan objek
• Method bawaan seperti map, filter, push, dan JSON.parse
• Bekerja dengan halaman (DOM), event, mengambil data, async/await

Dengan kata lain, logika program kamu praktis terlihat identik. Kalau kamu sudah bisa melakukan perulangan pada sebuah daftar atau memanggil fungsi di JavaScript, kamu sudah otomatis bisa melakukannya di TypeScript. Tidak ada bagian inti dari tata bahasa yang digantikan.

const names = ["Jane Doe", "John Doe"];

names.forEach((name) => {
  console.log(`Halo, ${name}`);
});

Cuplikan itu valid sebagai JavaScript sekaligus valid sebagai TypeScript. Coba baca lagi sambil mengingat hal itu, tidak ada satu pun bagian yang khas TypeScript di sana.

Apa yang ditambahkan TypeScript

Lapisan tambahannya sebagian besar soal mendeskripsikan dan memeriksa bentuk dari datamu. Beberapa tambahan yang paling sering dipakai:

Anotasi tipe. Kamu menempelkan label pada sebuah variabel, masukan sebuah fungsi, atau hasilnya.

function greet(user: string): string {
  return `Halo, ${user}`;
}

greet("Jane Doe");  // aman
greet(42);          // error: angka bukan teks

Interface dan type. Kamu bisa mendeskripsikan bentuk persis sebuah objek satu kali lalu memakainya ulang di mana saja, sehingga kompiler menjaga kamu tetap jujur soal field mana yang ada.

interface User {
  name: string;
  email: string;
  active: boolean;
}

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

Kalau kamu lupa email, atau salah ketik active jadi activ, TypeScript menunjuknya sebelum kode dijalankan. Di tim besar, ini otomatis menangkap satu kategori bug sekaligus.

Bantuan editor yang lebih baik. Karena editor kini tahu tipenya, ia memberi autocomplete yang lebih tajam, garis penanda error seketika, dan penggantian nama yang lebih aman lintas berkas. Banyak developer bertahan memakai TypeScript justru karena kenyamanan ini, sama besarnya dengan demi keamanannya.

Perbandingan berdampingan

Baca tabelnya dari atas ke bawah, dan gambarannya jadi jelas: TypeScript bukan arah yang berbeda, melainkan JavaScript dengan pagar pengaman tambahan plus satu langkah build yang ujungnya tetap menghasilkan JavaScript.

Mana yang sebaiknya dipelajari dulu?

Untuk pemula sejati, jawaban jujurnya: kuasai dulu JavaScript. Tipe di TypeScript baru masuk akal setelah kamu paham nilai-nilai yang sedang dideskripsikannya. Kamu sulit menghargai alat yang memperingatkan “ini harusnya angka, bukan teks” sebelum kamu tahu apa yang sedang dilakukan angka dan teks di dalam sebuah program.

Kabar baiknya, belajar JavaScript itu sekaligus belajar inti TypeScript, karena keduanya berbagi fondasi yang sama. Begitu dasar-dasarnya terasa alami, mempelajari TypeScript lebih banyak soal belajar mendeskripsikan datamu, bukan belajar bahasa baru dari nol. Banyak tim mengadopsinya bertahap, mengonversi satu berkas demi satu berkas, justru karena keduanya mudah dicampur.

Rangkuman

Mari kita satukan semuanya dengan bahasa sederhana:

• JavaScript adalah bahasa yang benar-benar dijalankan peramban. Ia luwes dan bertipe dinamis, praktis tapi membiarkan kesalahan tipe lolos sampai saat dijalankan.
• TypeScript adalah superset dari JavaScript: seluruh JavaScript, ditambah tipe statis opsional yang diperiksa saat kamu menulis.
• Semua sintaks sehari-hari, variabel, fungsi, perulangan, objek, method, identik di keduanya. TypeScript tidak menggantikan satu pun.
• Hal khas yang ditambahkan TypeScript adalah anotasi tipe beserta pemeriksaannya, yang menangkap sekelompok bug lebih awal dan memberi bantuan editor jauh lebih baik.
• TypeScript tidak bisa jalan langsung di peramban. Sebuah langkah kompilasi mengubah berkas .ts kamu menjadi berkas .js biasa sambil mencabut tipenya. Yang benar-benar dikirim dan dijalankan adalah JavaScript polos.
• Sebagai pemula, pelajari JavaScript dulu; kamu akan sekaligus mempelajari sebagian besar TypeScript, dan kamu bisa menambahkan lapisan tipenya begitu dasarnya sudah nyantol.

Dilihat begini, kata “vs” di judul sebenarnya agak menyesatkan. TypeScript dan JavaScript bukan benar-benar bersaing. Yang satu adalah fondasi yang bisa dipercaya, yang lain adalah lapisan cermat di atasnya yang, pada akhirnya, mengembalikan JavaScript yang sama persis seperti yang kamu mulai, hanya dengan jauh lebih sedikit kejutan di sepanjang jalan.