TypeScript untuk Developer JavaScript: Kenapa Harus Pindah?

TypeScript adalah JavaScript dengan sistem tipe (type system). Dibuat oleh Microsoft, TypeScript menambahkan anotasi tipe di atas JavaScript biasa, lalu meng-compile kode itu kembali menjadi JavaScript yang bisa jalan di browser dan Node.js mana pun. Manfaat utamanya: error tertangkap di editor sebelum kode dijalankan, autocompletion jadi jauh lebih pintar, dan kode besar tetap gampang di-maintain. Untuk developer JavaScript, TypeScript bukan bahasa baru yang harus dipelajari dari nol — ini JavaScript yang kamu sudah tahu, plus sebuah lapisan keamanan. Itu sebabnya React, Vue, Angular, Next.js, dan hampir semua tooling modern mendukung TypeScript secara native.

Artikel ini membahas semuanya dari nol untuk developer JS: apa itu TypeScript, perbedaannya dengan JavaScript, tipe dasar, interface vs type, union, generics, cara setup, sampai strategi migrasi bertahap tanpa harus menulis ulang proyek yang sudah jalan.

Apa Itu TypeScript?

TypeScript adalah “superset” dari JavaScript — artinya setiap kode JavaScript yang valid otomatis juga valid sebagai TypeScript. Bedanya, TypeScript membiarkan kamu menuliskan tipe dari setiap variabel, parameter, dan nilai kembalian fungsi, lalu memeriksa apakah semua tipe itu konsisten sebelum kode berjalan. Kalau kamu ingin versi interaktifnya, ada pelajaran “apa itu TypeScript” yang bisa kamu coba langsung sambil baca.

Kata kuncinya: compile-time. Browser tidak mengerti TypeScript. Sebuah compiler (bernama tsc) membaca file .ts/.tsx kamu, memeriksa semua tipe, lalu membuang anotasi tipe dan menghasilkan file .js biasa. Proses membuang tipe ini disebut type erasure — tipe hanya hidup saat development, bukan saat runtime.

// Ini TypeScript
function sapa(nama: string): string {
  return `Halo, ${nama}!`
}

// Setelah di-compile, ini JavaScript yang dihasilkan:
// function sapa(nama) {
//   return `Halo, ${nama}!`;
// }

Perhatikan: anotasi : string hilang total di hasil akhir. Tidak ada overhead runtime, tidak ada library tambahan yang ikut ke browser. TypeScript murni alat bantu saat kamu menulis kode. Kalau konsep dasar JavaScript-nya masih goyah, sebaiknya mantapkan dulu dengan membaca apa itu JavaScript dan cara kerjanya, karena TypeScript membangun tepat di atas fondasi itu.

Perbedaan TypeScript dan JavaScript

Perbedaan paling mendasar: JavaScript mengecek kesalahan saat kode berjalan (runtime), TypeScript mengeceknya saat kamu menulis (compile-time). JavaScript bertipe dinamis dan longgar — sebuah variabel bisa berubah dari angka menjadi string kapan saja tanpa peringatan. TypeScript menambahkan pengecekan tipe statis, sehingga banyak bug yang biasanya baru ketahuan di production justru muncul langsung di editormu.

Mari lihat masalahnya secara konkret. 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("100rb", 3)  // NaN — "100rb" tak bisa dikali, tapi JS diam saja
hitungTotal()            // NaN — tidak ada parameter

JavaScript tidak memberitahumu ada yang salah sampai kode dijalankan — dan bahkan saat dijalankan pun ia tidak protes, cuma memberi hasil yang aneh. Bug seperti ini bisa lolos sampai ke pengguna. TypeScript menangkap error ini sebelum kode dijalankan:

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, digarisbawahi merah, lengkap dengan penjelasan. Kamu memperbaikinya sambil menulis, bukan tiga hari kemudian saat ada laporan bug. Ini menghemat waktu debugging yang sangat banyak.

Berikut ringkasan perbedaan intinya:

Satu hal penting: TypeScript tidak membuat kodemu lebih cepat saat runtime, dan tidak menghilangkan semua bug. Ia menghilangkan satu kelas bug spesifik — kesalahan tipe — yang kebetulan adalah salah satu penyebab bug paling umum di aplikasi JavaScript besar.

Bandingkan Langsung

Cara tercepat merasakan bedanya adalah dengan mencobanya sendiri. Toggle antara JavaScript dan TypeScript di demo di bawah, ketik argumen yang salah, dan lihat bagaimana TypeScript menangkap bug yang dibiarkan lolos oleh JavaScript:

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

hitungTotal("100", 3)

Kenapa Harus Belajar TypeScript?

Alasan utama belajar TypeScript adalah produktivitas jangka panjang: kode yang lebih aman, editor yang lebih pintar, dan refactoring yang tidak menakutkan. Investasinya kecil (sintaks tipe cuma tambahan tipis di atas JS), tapi hasilnya terasa setiap hari begitu proyek mulai membesar. Berikut manfaat konkretnya:

• Autocompletion yang benar-benar tahu — Editor tahu persis properti dan method apa saja yang tersedia di sebuah objek, jadi kamu tidak perlu bolak-balik membuka dokumentasi atau menebak-nebak nama field.
• Refactoring yang aman — Rename sebuah properti, dan TypeScript langsung menandai semua tempat yang perlu ikut berubah. Di JavaScript, rename adalah “find & replace lalu berdoa”.
• Dokumentasi yang hidup — Interface dan tipe adalah dokumentasi yang tidak pernah basi, karena kalau kode berubah tapi tipe tidak, compiler langsung protes.
• Bug lebih sedikit di production — undefined is not a function dan Cannot read property 'x' of undefined adalah dua error paling terkenal di JavaScript. TypeScript menangkap mayoritasnya sebelum kode di-deploy.
• Standar industri — Hampir semua perusahaan teknologi dan library populer sudah memakai TypeScript. Menguasainya membuka lebih banyak pintu kerja.

Kalau kamu pernah mengerjakan proyek JavaScript yang tumbuh sampai ribuan baris, kamu tahu rasanya takut menyentuh kode lama karena tidak yakin apa yang akan rusak. TypeScript menghapus rasa takut itu.

Tipe Dasar TypeScript

Tipe dasar adalah fondasi TypeScript: string, number, boolean, array, dan objek. Kamu menuliskannya dengan tanda titik dua setelah nama variabel. Kalau mau langsung praktik sambil baca, ada materi tipe dasar TypeScript yang interaktif dan bisa langsung kamu coba.

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

// Array — dua cara menulis, keduanya sama
let bahasa: string[] = ["HTML", "CSS", "JavaScript"]
let skor: Array<number> = [100, 95, 88]

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

Kabar baiknya: kamu tidak wajib menulis tipe di mana-mana. TypeScript punya type inference — ia menebak tipe dari nilai yang kamu berikan. Menulis let umur = 22 sudah otomatis membuat umur bertipe number. Kamu hanya perlu anotasi eksplisit di tempat yang tidak bisa ditebak, seperti parameter fungsi.

Ada juga dua tipe khusus yang penting dipahami: any dan unknown.

// any — mematikan semua pengecekan tipe. HINDARI.
let sembarang: any = "halo"
sembarang.methodNgawur()   // TypeScript diam saja — bahaya!

// unknown — "aku belum tahu tipenya", tapi tetap aman
let belumTahu: unknown = ambilDataDariAPI()
// belumTahu.length          // ❌ Error: harus dicek dulu tipenya
if (typeof belumTahu === "string") {
  belumTahu.toUpperCase()    // ✅ sekarang aman
}

Aturan emas: any adalah pintu darurat yang mematikan seluruh manfaat TypeScript. Kalau kamu tidak tahu tipe sesuatu, pakai unknown — ia memaksamu memeriksa dulu sebelum memakainya.

Interface vs Type

Untuk objek yang kompleks, TypeScript menyediakan dua alat: interface dan type. Keduanya bisa mendeskripsikan bentuk (shape) sebuah objek, dan untuk kasus sehari-hari keduanya nyaris identik. Perbedaannya baru terasa di kasus lanjutan. Topik ini dibahas tuntas di pelajaran interface TypeScript.

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

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

const budi: User = {
  id: 1,
  nama: "Budi",
  email: "[email protected]",
  role: "admin",
  // bio boleh tidak ada karena opsional
}

Kapan Pakai Interface vs Type?

interface unggul untuk mendeskripsikan bentuk objek dan bisa di-extend seperti pewarisan. type lebih serbaguna: ia bisa menampung union, intersection, dan tipe kompleks lain yang tidak bisa dilakukan interface.

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

interface Dog extends Animal {
  breed: string
}
// Dog sekarang punya name DAN breed

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

Aturan praktis yang bisa langsung kamu pakai: gunakan interface untuk mendeskripsikan bentuk objek, type untuk segala hal lain (union, tuple, alias tipe primitif, fungsi). Kalau ragu, mulai dengan interface; ganti ke type saat kamu butuh sesuatu yang tidak didukung interface. Jangan buang waktu berdebat soal ini — konsistensi dalam tim jauh lebih penting daripada pilihan mana yang “benar”.

Union Types dan Literal Types

Union type membiarkan sebuah nilai memiliki salah satu dari beberapa tipe, ditulis dengan tanda pipa (|). Ini salah satu fitur TypeScript yang paling sering dipakai dan paling tidak ada padanannya di JavaScript. Untuk latihan mendalam, lihat pelajaran union dan literal types.

// Union: id boleh number ATAU string
function cariUser(id: number | string) {
  console.log(`Mencari user ${id}`)
}

cariUser(42)      // ✅
cariUser("abc")   // ✅
cariUser(true)    // ❌ boolean tidak termasuk

Yang lebih ampuh lagi adalah literal type — union dari nilai spesifik, bukan sekadar tipe. Ini mengubah string biasa menjadi daftar pilihan yang tertutup:

type Ukuran = "small" | "medium" | "large"

function pesanKopi(ukuran: Ukuran) {
  // ...
}

pesanKopi("medium")  // ✅
pesanKopi("jumbo")   // ❌ "jumbo" bukan salah satu pilihan valid

Literal type inilah yang membuat properti seperti role: "admin" | "user" | "guest" di contoh interface tadi begitu berguna: editor akan menawarkan tepat tiga pilihan itu lewat autocomplete, dan salah ketik langsung ketahuan. Ini menggantikan banyak kebutuhan akan enum dengan cara yang lebih ringan.

Generics

Generics membuat fungsi dan tipe yang fleksibel tapi tetap type-safe — bayangkan tipe sebagai parameter yang bisa diisi belakangan. Konsep ini paling cepat nyantol kalau dicoba langsung di playground generics interaktif.

// 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

Huruf T di situ hanyalah nama placeholder untuk “tipe apa pun yang nanti dipakai” — kamu boleh menamainya apa saja, tapi T (Type) adalah konvensi. Saat kamu memanggil first([1, 2, 3]), TypeScript otomatis mengisi T dengan number, jadi kamu tidak perlu menuliskannya.

Generics ada di mana-mana begitu kamu masuk ke React. Faktanya, useState sendiri sudah generic:

// useState menerima tipe apa yang disimpan di state
const [count, setCount] = useState<number>(0)
const [user, setUser] = useState<User | null>(null)
const [items, setItems] = useState<string[]>([])

Karena useState<User | null> tahu bahwa user bisa bernilai null, TypeScript akan mengingatkanmu untuk mengecek null sebelum mengakses user.nama — persis kasus yang biasanya jadi bug Cannot read property of null di JavaScript.

Narrowing: Menyempitkan Tipe

Narrowing adalah cara TypeScript mempersempit sebuah union menjadi tipe yang lebih spesifik berdasarkan pengecekan di dalam kode. Ini yang membuat union type aman dipakai: setelah kamu mengecek “ini string atau bukan”, TypeScript otomatis tahu tipe pastinya di dalam blok itu.

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

Narrowing juga bekerja mulus dengan optional chaining (?.) dan nullish coalescing (??) untuk menangani data yang mungkin tidak ada — pola yang sangat umum saat memproses respons API:

interface Response {
  data?: {
    user?: {
      name: string
    }
  }
}

function getName(res: Response): string {
  // Kalau salah satu level tidak ada, hasilnya "Unknown"
  return res.data?.user?.name ?? "Unknown"
}

Tanpa TypeScript, mengakses res.data.user.name pada objek yang levelnya kosong akan meledak dengan error runtime. Dengan TypeScript, tanda ? memaksamu menangani kemungkinan itu sejak awal.

Utility Types

Utility types adalah tipe bawaan TypeScript yang mentransformasi tipe lain — misalnya membuat semua properti opsional, atau mengambil sebagian properti saja. Ini menghemat banyak pengetikan berulang. Daftar lengkapnya bisa kamu eksplor di pelajaran utility types.

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

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

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

// Omit — buang properti tertentu (misal sembunyikan password)
type PublicUser = Omit<User, "password">
// { id: number; nama: string; email: string }

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

Yang membuat utility types powerful: kalau interface User berubah (misalnya kamu menambah properti avatar), semua tipe turunan seperti UpdateUser dan PublicUser ikut menyesuaikan otomatis. Kamu tidak perlu menjaga tiga definisi tipe yang saling menyalin.

TypeScript di React

TypeScript dan React adalah kombinasi yang hampir menjadi standar wajib di industri front-end. Cara paling umum memakainya adalah mendeskripsikan props sebuah komponen dengan interface. Kalau kamu sedang belajar React dari nol, kuasai pola ini sejak awal — ada materi TypeScript untuk React yang membahasnya satu per satu.

// 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>
  )
}

Sekarang TypeScript mengawal setiap pemakaian komponen ini:

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

Bayangkan tim beranggotakan lima orang. Tanpa TypeScript, orang lain harus membaca kode Button untuk tahu props apa yang diterima. Dengan TypeScript, editor mereka langsung menampilkan daftar props, mana yang wajib, dan nilai apa yang boleh — dokumentasi otomatis yang tidak pernah salah.

Cara Setup TypeScript

Setup TypeScript berbeda tergantung apakah kamu memulai proyek baru atau menambahkannya ke proyek JavaScript yang sudah ada. Untuk proyek baru, tool modern seperti Vite sudah menyediakan template siap pakai. Konfigurasinya diatur lewat file tsconfig.json — dan detail setiap opsinya dibahas di panduan setup tsconfig.

Proyek baru

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

Perintah ini membuat proyek React lengkap dengan TypeScript sudah dikonfigurasi. Kamu tinggal cd my-app, npm install, dan mulai coding.

Proyek JavaScript yang sudah ada

# 1. Install TypeScript sebagai dev dependency
npm install -D typescript

# 2. Buat file konfigurasi tsconfig.json
npx tsc --init

# 3. Rename file .js menjadi .ts (atau .jsx menjadi .tsx)
# 4. Jalankan compiler untuk melihat error yang perlu diperbaiki
npx tsc --noEmit

Langkah 4 penting: --noEmit menyuruh TypeScript hanya mengecek tipe tanpa menghasilkan file JS, sehingga kamu bisa melihat daftar masalah tanpa mengubah apa pun.

tsconfig.json yang penting

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

Dari semua opsi ini, "strict": true adalah yang paling penting — aktifkan sejak hari pertama. Mode strict menyalakan sekumpulan pengecekan ketat (termasuk pengecekan null dan undefined) yang merupakan alasan utama orang memakai TypeScript. Menyalakannya belakangan di proyek besar jauh lebih menyakitkan daripada memulai dengannya.

Migrasi Bertahap dari JavaScript

Kabar paling melegakan: kamu tidak perlu menulis ulang seluruh proyek sekaligus. Karena setiap file JavaScript valid juga valid sebagai TypeScript, kamu bisa mengonversi file satu per satu sambil aplikasi tetap jalan. Strategi lengkapnya ada di panduan migrasi JavaScript ke TypeScript, tapi inti taktiknya begini:

1. Mulai dengan strict: true — Lebih mudah strict dari awal daripada menyalakannya nanti saat error sudah menumpuk.
2. Konversi dari daun ke akar — Mulai dari file utilitas kecil yang tidak bergantung pada file lain, baru naik ke modul yang lebih besar.
3. Jangan pakai any sebagai jalan pintas — Godaan terbesar saat migrasi adalah menaburkan any agar error hilang. Itu mematikan seluruh manfaat TypeScript. Kalau benar-benar belum tahu tipenya, pakai unknown.
4. Prioritaskan tipe yang sering dipakai — Buat dulu interface untuk respons API, props komponen, dan bentuk state. Ini memberi manfaat terbesar dengan usaha paling sedikit.
5. Manfaatkan inference — Tidak perlu anotasi semua. Biarkan TypeScript menebak; anotasi hanya di batas-batas (parameter fungsi, nilai kembalian publik).
6. Install paket @types/ — Untuk library yang belum menyertakan tipe bawaan, ambil definisinya: npm install -D @types/lodash.

Selama masa transisi, kamu bisa membiarkan file .js dan .ts hidup berdampingan dengan opsi "allowJs": true di tsconfig. Konversi bertahap ini membuat migrasi terasa seperti perbaikan kecil sehari-hari, bukan proyek besar yang menakutkan.

Mini-Project: Keranjang Belanja Type-Safe

Mari satukan semua konsep dalam contoh kecil yang realistis: fungsi keranjang belanja. Ini menunjukkan bagaimana interface, union, generics, dan utility types bekerja bersama dalam kode nyata.

// 1. Deskripsikan bentuk data dengan interface
interface Produk {
  id: number
  nama: string
  harga: number
  kategori: "makanan" | "minuman" | "snack"  // literal union
}

interface ItemKeranjang {
  produk: Produk
  jumlah: number
}

// 2. Fungsi generic untuk mencari item berdasarkan properti apa pun
function cariBerdasarkan<K extends keyof Produk>(
  daftar: Produk[],
  key: K,
  nilai: Produk[K]
): Produk | undefined {
  return daftar.find((p) => p[key] === nilai)
}

// 3. Hitung total dengan tipe kembalian yang jelas
function hitungTotal(keranjang: ItemKeranjang[]): number {
  return keranjang.reduce(
    (total, item) => total + item.produk.harga * item.jumlah,
    0
  )
}

// 4. Pakai — semuanya type-safe
const katalog: Produk[] = [
  { id: 1, nama: "Kopi", harga: 15000, kategori: "minuman" },
  { id: 2, nama: "Keripik", harga: 8000, kategori: "snack" },
]

const kopi = cariBerdasarkan(katalog, "nama", "Kopi")  // ✅ Produk | undefined
const salah = cariBerdasarkan(katalog, "harga", "mahal") // ❌ "mahal" bukan number

const keranjang: ItemKeranjang[] = [
  { produk: katalog[0]!, jumlah: 2 },
]

console.log(hitungTotal(keranjang))  // 30000

Perhatikan baris cariBerdasarkan(katalog, "harga", "mahal") yang ditolak: karena harga bertipe number, TypeScript menuntut nilai pencariannya juga number. Bug seperti membandingkan angka dengan string tertangkap otomatis — inilah gunanya generic dengan keyof. Di JavaScript polos, kode itu jalan mulus lalu diam-diam mengembalikan undefined.

Kesalahan Umum

Beberapa jebakan ini sering dialami pendatang baru dari JavaScript. Mengenalinya lebih awal akan menghemat banyak frustrasi.

1. Menaburkan any ke mana-mana. Ini kesalahan nomor satu. Setiap kali kamu menulis : any, kamu mematikan TypeScript di titik itu. Kalau seluruh proyek penuh any, kamu sebenarnya menulis JavaScript dengan langkah ekstra. Ganti dengan tipe yang tepat, atau unknown kalau memang belum tahu.

// ❌ Buruk — TypeScript jadi tidak berguna
function parse(data: any) {
  return data.hasil.items
}

// ✅ Lebih baik — paksa pengecekan
function parse(data: unknown) {
  if (
    typeof data === "object" && data !== null &&
    "hasil" in data
  ) {
    // sekarang aman menelusuri lebih dalam
  }
}

2. Bingung antara compile-time dan runtime. Tipe hilang setelah di-compile. Kamu tidak bisa menulis if (x is Produk) di runtime, karena Produk tidak ada lagi di JavaScript hasil. Pengecekan tipe harus pakai cara JavaScript biasa (typeof, in, instanceof).

3. Mengira TypeScript memvalidasi data dari luar. TypeScript hanya percaya pada apa yang kamu janjikan lewat tipe. Kalau kamu menulis const user = await res.json() as User, TypeScript percaya bahwa itu User — padahal API bisa saja mengirim data lain. Untuk data eksternal (API, form, localStorage), tetap butuh validasi runtime (misalnya dengan library seperti Zod).

4. Melawan compiler dengan as. Type assertion (nilai as Tipe) memberitahu TypeScript “percaya aku, ini tipenya begini”. Sesekali perlu, tapi kalau kamu sering memakainya untuk membungkam error, biasanya itu tanda tipenya salah dirancang, bukan compiler-nya yang keliru.

5. Lupa menangani null dan undefined. Dengan strict menyala, TypeScript memaksamu mengecek nilai yang mungkin kosong. Ini terasa cerewet di awal, tapi justru di sinilah TypeScript mencegah error runtime paling umum. Jangan matikan strictNullChecks hanya untuk menghindarinya.

Cara Belajar TypeScript dari Nol

Cara belajar TypeScript yang paling efektif adalah bertahap sambil praktik, bukan menghafal seluruh sintaks sekaligus. Karena TypeScript dibangun di atas JavaScript, prasyarat utamanya adalah nyaman dulu dengan JavaScript. Berikut urutan yang masuk akal:

1. Kuasai dasar JavaScript dulu — variabel, fungsi, array, object, dan async. Kalau ini masih ragu, mulai dari dasar-dasar JavaScript sebelum menambahkan tipe.
2. Pelajari tipe dasar dan inference — string, number, boolean, array, object. Rasakan kapan kamu perlu anotasi dan kapan TypeScript bisa menebak sendiri.
3. Naik ke interface, union, dan literal types — ini 80% dari TypeScript yang kamu pakai sehari-hari.
4. Terapkan di proyek nyata — bikin ulang proyek kecil JavaScript-mu dalam TypeScript. Belajar sambil migrasi jauh lebih nempel daripada membaca teori.
5. Baru masuk generics dan utility types — konsep ini paling gampang dipahami setelah kamu punya konteks kebutuhan nyata.
6. Integrasikan dengan framework — React, Vue, atau Node, tempat TypeScript benar-benar bersinar.

Kalau kamu suka belajar dengan latihan interaktif yang langsung mengecek jawaban, mulai saja dari jalur TypeScript langkah demi langkah dan naik bertahap dari sana.

FAQ

TypeScript itu untuk apa?

TypeScript dipakai untuk menulis JavaScript yang lebih aman dan lebih mudah di-maintain, terutama di proyek berukuran menengah sampai besar. Ia menambahkan sistem tipe yang menangkap kesalahan sebelum kode dijalankan, memberikan autocompletion yang akurat, dan membuat refactoring jadi aman. Hampir semua aplikasi web modern, library, dan framework kini ditulis atau mendukung TypeScript.

Apakah harus bisa JavaScript dulu sebelum belajar TypeScript?

Ya, sangat disarankan. TypeScript adalah JavaScript plus sistem tipe — semua logika, sintaks, dan konsep JavaScript tetap berlaku. Kalau kamu belum paham fungsi, array, object, dan async di JavaScript, sebaiknya kuatkan dulu fondasi itu, karena TypeScript hanya menambahkan lapisan tipe di atasnya, bukan menggantikannya.

Apakah TypeScript lebih lambat dari JavaScript?

Tidak. TypeScript tidak menambah beban apa pun saat runtime, karena semua tipe dihapus (type erasure) saat di-compile menjadi JavaScript biasa. Yang berjalan di browser atau server adalah JavaScript murni. Satu-satunya langkah tambahan adalah proses compile saat development, dan itu tidak memengaruhi kecepatan aplikasi bagi pengguna akhir.

Kapan sebaiknya pakai type dan kapan interface?

Aturan praktisnya: pakai interface untuk mendeskripsikan bentuk objek dan props (apalagi kalau perlu di-extend), dan pakai type untuk union, literal, tuple, atau alias tipe kompleks lain. Untuk kebanyakan kasus sehari-hari keduanya bisa saling menggantikan, jadi yang terpenting adalah konsisten di dalam satu proyek atau tim.

Berapa lama waktu yang dibutuhkan untuk belajar TypeScript?

Kalau kamu sudah nyaman dengan JavaScript, dasar-dasar TypeScript (tipe dasar, interface, union) bisa dikuasai dalam beberapa hari sampai satu-dua minggu praktik. Konsep lanjutan seperti generics dan utility types butuh sedikit lebih lama untuk benar-benar terasa alami — biasanya setelah kamu memakainya di proyek nyata beberapa kali. Kuncinya konsistensi praktik, bukan lama belajar teori.

Apakah TypeScript wajib untuk React?

Tidak wajib, tapi sangat direkomendasikan dan sudah menjadi standar de facto di industri. React sepenuhnya bisa dipakai dengan JavaScript biasa, tapi kombinasi React + TypeScript memberikan pengalaman development yang jauh lebih aman: props tervalidasi, state bertipe jelas, dan bug tertangkap sejak di editor. Banyak lowongan front-end kini mensyaratkan TypeScript, jadi menguasainya adalah investasi karier yang bagus.

Penutup

TypeScript bukan bahasa asing yang harus dipelajari dari nol — ia JavaScript yang kamu sudah tahu, ditambah jaring pengaman. Kamu mendapat autocompletion yang benar-benar tahu isi kodemu, refactoring yang tidak menakutkan, dokumentasi yang selalu sinkron, dan lebih sedikit bug yang lolos ke pengguna. Mulailah dari strict: true, hindari any, konversi satu file sekali jalan, dan biarkan inference bekerja untukmu.

Investasi belajar TypeScript terbayar sangat cepat. Setelah terbiasa dengan editor yang selalu memberitahumu saat ada yang salah, kamu tidak akan mau kembali menebak-nebak di JavaScript plain lagi.