Pengenalan TypeScript: Superset JavaScript yang Lebih Aman

Pernahkah kamu menghabiskan waktu berjam-jam men-debug hanya untuk menemukan bahwa bug-nya adalah typo nama properti atau fungsi yang menerima string padahal seharusnya number? TypeScript hadir untuk mengatasi masalah ini. TypeScript adalah superset dari JavaScript yang menambahkan sistem tipe statis — artinya banyak bug bisa ditemukan sebelum kode dijalankan, langsung saat kamu mengetik. Di artikel ini kita akan memahami hubungan TypeScript dengan JavaScript dan menulis program pertama.

Apa Itu TypeScript dan Hubungannya dengan JavaScript?

TypeScript dikembangkan oleh Microsoft dan dirilis pada tahun 2012. Konsep terpentingnya: TypeScript adalah superset JavaScript.

JavaScript
    ⊂
TypeScript

Artinya:

• Setiap kode JavaScript yang valid adalah kode TypeScript yang valid
• TypeScript menambahkan fitur baru di atas JavaScript (terutama tipe statis)
• TypeScript dikompilasi menjadi JavaScript sebelum dijalankan di browser/Node.js

Perbandingan Langsung

// JavaScript — tidak ada proteksi tipe
function hitung_diskon(harga, persen) {
    return harga - (harga * persen / 100);
}

hitung_diskon("50000", 10); // Tidak ada error! Tapi hasilnya aneh: "500000-5000"
hitung_diskon(50000);        // Tidak ada error! Tapi hasilnya NaN

// TypeScript — compiler langsung menangkap error
function hitung_diskon(harga: number, persen: number): number {
    return harga - (harga * persen / 100);
}

hitung_diskon("50000", 10); // ❌ Error: Argument of type 'string' is not assignable to parameter of type 'number'
hitung_diskon(50000);        // ❌ Error: Expected 2 arguments, but got 1
hitung_diskon(50000, 10);   // ✅ Output: 45000

TypeScript menemukan kedua bug sebelum kamu menjalankan program!

Mengapa Menggunakan TypeScript?

1. Bug Terdeteksi Lebih Awal

Sistem tipe TypeScript bertindak seperti unit test otomatis yang selalu berjalan saat kamu mengetik. Error ditemukan di editor, bukan di production.

2. Autocomplete yang Lebih Baik

interface Produk {
    nama: string;
    harga: number;
    stok: number;
}

const laptop: Produk = { nama: "ThinkPad", harga: 15_000_000, stok: 5 };
laptop. // Editor langsung menampilkan: nama, harga, stok

3. Dokumentasi yang Hidup

Tipe data adalah dokumentasi yang selalu up-to-date:

// Tanpa TypeScript — tidak jelas apa yang dikembalikan
function cari_user(id) { ... }

// Dengan TypeScript — langsung jelas
function cari_user(id: number): User | null { ... }

4. Refactoring yang Aman

Saat mengubah nama properti atau tipe, TypeScript menandai semua tempat yang perlu diperbarui.

Instalasi TypeScript

TypeScript membutuhkan Node.js. Jika belum ada, unduh dari nodejs.org (pilih versi LTS).

# Instalasi TypeScript secara global
npm install -g typescript

# Verifikasi
tsc --version
# Output: Version 5.x.x

Untuk proyek baru, lebih baik install sebagai devDependency:

mkdir belajar-typescript
cd belajar-typescript
npm init -y
npm install --save-dev typescript

# Gunakan npx untuk menjalankan tsc lokal
npx tsc --version

Konfigurasi: tsconfig.json

File tsconfig.json mengontrol cara TypeScript mengkompilasi kode:

# Buat tsconfig.json otomatis
tsc --init

Konfigurasi dasar yang disarankan:

{
  "compilerOptions": {
    "target": "ES2020",        // Versi JavaScript output
    "module": "commonjs",      // Sistem modul
    "outDir": "./dist",        // Folder output hasil kompilasi
    "rootDir": "./src",        // Folder source TypeScript
    "strict": true,            // Aktifkan semua pengecekan ketat
    "esModuleInterop": true,   // Kompatibilitas import
    "skipLibCheck": true       // Skip pengecekan file library
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

"strict": true adalah pengaturan terpenting — aktifkan ini selalu! Ini mengaktifkan pengecekan null, tipe implisit any, dan banyak pengecekan berguna lainnya.

Menulis Program Pertama

Buat folder src/ dan file src/salam.ts:

// src/salam.ts

function buat_salam(nama: string, umur: number): string {
    return `Halo, ${nama}! Kamu berumur ${umur} tahun.`;
}

const pesan = buat_salam("Rina", 22);
console.log(pesan);

// Coba kirim argumen yang salah:
// buat_salam(22, "Rina"); // ❌ Error langsung di editor

Kompilasi dan jalankan:

# Kompilasi: .ts → .js
npx tsc

# Hasil di dist/salam.js:
# "use strict";
# function buat_salam(nama, umur) {
#     return `Halo, ${nama}! Kamu berumur ${umur} tahun.`;
# }
# const pesan = buat_salam("Rina", 22);
# console.log(pesan);

# Jalankan dengan Node.js
node dist/salam.js
# Output: Halo, Rina! Kamu berumur 22 tahun.

Perhatikan: hasil kompilasi adalah JavaScript biasa — tipe annotation dihapus sepenuhnya. TypeScript hanya membantu kamu saat menulis kode.

Mode Development dengan ts-node

Untuk development, gunakan ts-node agar tidak perlu kompilasi manual:

# Install ts-node
npm install --save-dev ts-node

# Jalankan langsung tanpa kompilasi manual
npx ts-node src/salam.ts
# Output: Halo, Rina! Kamu berumur 22 tahun.

Path Migrasi: JavaScript → TypeScript

Jika kamu sudah punya proyek JavaScript, migrasi ke TypeScript tidak perlu dilakukan sekaligus:

1. Ubah ekstensi file dari .js ke .ts satu per satu
2. Tambahkan tsconfig.json dengan "strict": false di awal
3. Tambahkan tipe secara bertahap
4. Aktifkan "strict": true setelah semua tipe sudah ditambahkan

TypeScript dirancang untuk migrasi bertahap — kamu bisa punya file .js dan .ts dalam satu proyek.

Pertanyaan yang Sering Diajukan

Apakah TypeScript menggantikan JavaScript?

Tidak! TypeScript dikompilasi menjadi JavaScript. Browser dan Node.js tetap menjalankan JavaScript. TypeScript adalah alat bantu untuk developer yang memberikan type safety saat development, lalu “menghilang” saat runtime.

Apakah semua proyek perlu menggunakan TypeScript?

Tidak wajib, tapi sangat disarankan untuk proyek besar atau tim. Untuk skrip kecil, JavaScript mungkin sudah cukup. Framework modern seperti Angular wajib TypeScript; React dan Vue sangat menganjurkannya; Next.js dan Astro (yang digunakan di proyek ini!) mendukung TypeScript secara penuh.

Apakah TypeScript lebih lambat dari JavaScript?

Di runtime, tidak ada perbedaan — keduanya menjalankan JavaScript yang sama. Ada tambahan waktu di fase kompilasi, tapi ini terjadi saat development, bukan saat pengguna menggunakan aplikasimu.

Haruskah saya pindah ke TypeScript jika sudah mahir JavaScript?

Sangat disarankan! TypeScript mempercepat development dalam jangka panjang karena mengurangi waktu debugging. Industri sudah bergerak ke arah TypeScript — sebagian besar lowongan frontend/fullstack sekarang meminta TypeScript.

Kesimpulan

TypeScript adalah investasi jangka panjang yang sangat sepadan — terutama jika kamu sudah menguasai JavaScript.

Prasyarat yang disarankan: Belajar JavaScript dari Nol — pastikan kamu sudah memahami dasar JavaScript sebelum lanjut.

Langkah selanjutnya: Tipe Data Dasar di TypeScript — cara mendeklarasikan tipe untuk semua jenis data di TypeScript.