Type ErrorTypeScriptType Error7 mnt baca

Memahami Type 'X' is not assignable to type 'Y' di TypeScript

Error TS2322 dan kawan-kawannya: TypeScript menolak nilai karena tipenya tidak cocok. Cara membaca dan memperbaikinya.

1 · Gejala & Log Pesan Error

error.log
src/app.ts:15:7 - error TS2322: Type 'string | undefined' is not
assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.

15   const nama: string = user.name;
         ~~~~

// varian lain:
error TS18048: 'user' is possibly 'null'.
error TS2345: Argument of type 'number | undefined' is not assignable
to parameter of type 'number'.

2 · Akar Penyebab Masalah

TypeScript Menjagamu dari Nilai yang Mungkin Kosong

Dengan strict: true (default di proyek modern), TypeScript melacak nilai yang bisa menjadi undefined atau null. Error ini muncul saat kamu memasukkan nilai "mungkin kosong" ke tempat yang menuntut nilai "pasti ada".

Ini bukan TypeScript yang rewel. Ini TypeScript yang menemukan bug sebelum user menemukannya: kalau user.name ternyata undefined saat runtime, itu adalah bug nyata yang di JavaScript polos baru meledak sebagai TypeError di browser.

Pola Umum

  • Hasil pencarian: array.find() mengembalikan T | undefined karena item bisa tidak ketemu.
  • Properti opsional: name?: string artinya tipenya string | undefined.
  • Respons API yang di-type longgar lalu dipakai seolah pasti lengkap.

3 · Solusi & Diff Kode

✕ Sebelum (bermasalah)

before
// ❌ TS2322: name bisa undefined
interface User {
  name?: string;
}

function sapa(user: User) {
  const nama: string = user.name; // error di sini
  console.log("Halo, " + nama.toUpperCase());
}

✓ Sesudah (diperbaiki)

after
// ✔ sempitkan tipe dulu (narrowing), baru pakai
function sapa(user: User) {
  const nama: string = user.name ?? "Tamu"; // default aman
  console.log("Halo, " + nama.toUpperCase());
}

// alternatif: guard clause
function sapa2(user: User) {
  if (!user.name) return; // setelah ini, name pasti string
  console.log("Halo, " + user.name.toUpperCase());
}

Langkah Perbaikan

  1. Baca bagian "is not assignable": sisi kiri adalah yang kamu punya, sisi kanan adalah yang diminta. Fokus ke perbedaannya (biasanya | undefined atau | null).
  2. Jangan paksa dengan as: user.name as string membungkam compiler tapi bug runtime tetap ada. Itu menunda masalah, bukan memperbaikinya.
  3. Pilih perbaikan yang jujur:
    • Nilai default: ?? "Tamu" kalau memang ada fallback yang masuk akal.
    • Guard: if (!x) return; kalau kode di bawahnya memang butuh nilai pasti.
    • Perbaiki type definisinya kalau datanya sebenarnya selalu ada (mis. name: string bukan name?: string).
  4. Hindari non-null assertion (!) kecuali kamu 200% yakin. user.name! yang salah akan meledak sebagai "Cannot read properties of undefined" di runtime.