TypeScript untuk Developer JavaScript: Kenapa Harus Pindah?

TypeScript adalah JavaScript dengan type system. Dibuat oleh Microsoft, TypeScript sekarang menjadi standar de facto di industri — React, Vue, Angular, Next.js, dan hampir semua framework modern mendukung TypeScript secara native.

Masalah dengan JavaScript

JavaScript itu fleksibel — terlalu fleksibel. Ini sering menyebabkan bug yang sulit dilacak:

// JavaScript: tidak ada error, tapi hasilnya salah
function hitungTotal(harga, jumlah) {
  return harga * jumlah
}

hitungTotal("100", 3)  // "100100100" — string repetition, bukan 300!
hitungTotal()           // NaN — tidak ada parameter

JavaScript tidak memberitahumu ada yang salah sampai kode dijalankan. TypeScript menangkap error ini sebelum kode dijalankan.

TypeScript: Error Terdeteksi Lebih Awal

function hitungTotal(harga: number, jumlah: number): number {
  return harga * jumlah
}

hitungTotal("100", 3)  // ❌ Error: Argument of type 'string' is not assignable to parameter of type 'number'
hitungTotal()           // ❌ Error: Expected 2 arguments, but got 0
hitungTotal(100, 3)     // ✅ 300

Error muncul di editor, sebelum kamu menjalankan kode. Ini menghemat waktu debugging yang sangat banyak.

Bandingkan Langsung

Toggle antara JavaScript dan TypeScript — lihat bagaimana TypeScript menangkap bug:

function hitungTotal(harga, jumlah) {
  return harga * jumlah
}

hitungTotal("100", 3)

Tipe Dasar

// Primitif
let nama: string = "Budi"
let umur: number = 22
let aktif: boolean = true

// Array
let bahasa: string[] = ["HTML", "CSS", "JavaScript"]
let skor: number[] = [100, 95, 88]

// Object
let user: { nama: string; umur: number; aktif: boolean } = {
  nama: "Budi",
  umur: 22,
  aktif: true,
}

Interface dan Type

Untuk objek yang kompleks, gunakan interface atau type:

interface User {
  id: number
  nama: string
  email: string
  role: "admin" | "user" | "guest"
  bio?: string  // opsional
}

function greet(user: User): string {
  return `Halo, ${user.nama}!`
}

const budi: User = {
  id: 1,
  nama: "Budi",
  email: "budi@email.com",
  role: "admin",
}

Kapan Pakai Interface vs Type?

// Interface — untuk object shapes, bisa di-extend
interface Animal {
  name: string
}

interface Dog extends Animal {
  breed: string
}

// Type — untuk union, intersection, dan tipe kompleks
type Status = "loading" | "success" | "error"
type Result = { data: string } | { error: string }
type Nullable<T> = T | null

Aturan umum: gunakan interface untuk objek, type untuk yang lainnya.

Generics

Generics membuat fungsi dan tipe yang fleksibel tapi tetap type-safe:

// Tanpa generic — harus buat versi untuk setiap tipe
function firstString(arr: string[]): string | undefined {
  return arr[0]
}

function firstNumber(arr: number[]): number | undefined {
  return arr[0]
}

// Dengan generic — satu fungsi untuk semua tipe
function first<T>(arr: T[]): T | undefined {
  return arr[0]
}

first<string>(["a", "b", "c"])  // return type: string
first<number>([1, 2, 3])        // return type: number
first([true, false])             // TypeScript infer: boolean

Generics sangat sering dipakai di React:

// useState sudah generic!
const [count, setCount] = useState<number>(0)
const [user, setUser] = useState<User | null>(null)
const [items, setItems] = useState<string[]>([])

TypeScript di React

// Props dengan interface
interface ButtonProps {
  label: string
  variant?: "primary" | "secondary"
  disabled?: boolean
  onClick: () => void
}

function Button({ label, variant = "primary", disabled, onClick }: ButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={variant === "primary" ? "bg-orange-500" : "bg-gray-500"}
    >
      {label}
    </button>
  )
}

// TypeScript menangkap error di props
<Button label="Klik" onClick={() => {}} />           // ✅
<Button label={123} onClick={() => {}} />             // ❌ number bukan string
<Button label="Klik" variant="danger" onClick={() => {}} />  // ❌ "danger" bukan valid variant

Utility Types

TypeScript punya built-in utility types yang sangat berguna:

interface User {
  id: number
  nama: string
  email: string
  password: string
}

// Partial — semua properti jadi opsional
type UpdateUser = Partial<User>
// { id?: number; nama?: string; email?: string; password?: string }

// Pick — ambil properti tertentu
type UserPreview = Pick<User, "id" | "nama">
// { id: number; nama: string }

// Omit — hapus properti tertentu
type PublicUser = Omit<User, "password">
// { id: number; nama: string; email: string }

// Record — object dengan key dan value type
type Scores = Record<string, number>
// { [key: string]: number }

Narrowing

TypeScript bisa mempersempit tipe berdasarkan kondisi:

function proses(input: string | number) {
  if (typeof input === "string") {
    // TypeScript tahu ini string
    console.log(input.toUpperCase())
  } else {
    // TypeScript tahu ini number
    console.log(input.toFixed(2))
  }
}

// Dengan optional chaining
interface Response {
  data?: {
    user?: {
      name: string
    }
  }
}

function getName(res: Response): string {
  return res.data?.user?.name ?? "Unknown"
}

Cara Memulai

Proyek baru

npm create vite@latest my-app -- --template react-ts

Proyek JavaScript yang sudah ada

1. Install TypeScript: npm install -D typescript
2. Buat config: npx tsc --init
3. Rename file .js → .ts (atau .jsx → .tsx)
4. Fix error satu per satu — tidak harus sekaligus!

tsconfig.json penting

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "target": "ES2022",
    "module": "ESNext",
    "jsx": "react-jsx"
  }
}

"strict": true adalah yang paling penting — aktifkan dari awal.

Tips Migrasi dari JavaScript

1. Mulai dengan strict: true — Lebih mudah strict dari awal daripada mengaktifkan nanti
2. Jangan pakai any — any mematikan type checking, gunakan unknown kalau tidak tahu tipenya
3. Mulai dari tipe yang sering dipakai — Interface untuk API response, props, dan state
4. Manfaatkan inference — Tidak perlu annotate semua, TypeScript pintar menebak tipe
5. Install @types/ packages — Untuk library tanpa TypeScript built-in: npm install -D @types/lodash

Kenapa TypeScript Worth It

• Autocompletion — Editor tahu semua properti dan method yang tersedia
• Refactoring aman — Rename variabel dan TypeScript update semua referensi
• Dokumentasi hidup — Interface adalah dokumentasi yang selalu up-to-date
• Bug lebih sedikit — Banyak bug tertangkap sebelum runtime
• Standar industri — Hampir semua perusahaan tech menggunakan TypeScript

Investasi belajar TypeScript terbayar sangat cepat. Setelah terbiasa, kamu tidak akan mau kembali ke JavaScript plain.