TS2322: Type 'X' is not assignable to type 'Y'

The exact error string

let count: number = "5";
// error TS2322: Type 'string' is not assignable to type 'number'.

interface User { id: number; name: string; }
const u: User = { id: 1, name: 42 };
// error TS2322: Type 'number' is not assignable to type 'string'.  (on name)

How to read a TS2322 error (find the real cause)

The first line names the two top-level types, but the actual mismatch is usually deeper. Read down to the innermost Types of property 'x' are incompatible / Type 'A' is not assignable to type 'B' line — that pinpoints the field and the exact types to change. In your editor, hover the red underline to see the same nested breakdown.

const users: User[] = [{ id: "42", name: "Ada" }];
// error TS2322: Type '{ id: string; name: string; }[]' is not assignable to type 'User[]'.
//   Type '{ id: string; name: string; }' is not assignable to type 'User'.
//     Types of property 'id' are incompatible.
//       Type 'string' is not assignable to type 'number'.   <-- the real cause

Ignore the noisy outer types and jump to the last line: id is a string where User.id is a number. That single field is what you fix.

Fix 1: make the value and the type agree

Decide which side is correct — the value or the declared type — and fix that one:

let count: number = 5;            // value corrected
let id: string = "5";            // or the type corrected to match the value

Fix 2: strictNullChecks — handle null/undefined

The single most common TS2322 is a possibly-undefined value assigned to a non-optional type. Narrow it before assigning:

function f(name?: string) {
  const s: string = name;          // ❌ string | undefined not assignable to string

  const s1: string = name ?? "";   // ✅ default
  if (name !== undefined) {
    const s2: string = name;       // ✅ narrowed
  }
}

Fix 3: widen the target with a union (when both are valid)

If the target legitimately holds more than one type, declare a union — but only when both values truly belong there:

let id: string | number;
id = 5;       // ✅
id = "abc";   // ✅

Fix 4: assertions — last resort

A type assertion silences the check without changing the value, so use it only when you genuinely know more than the compiler (e.g. right after validating external data):

const el = document.getElementById("app") as HTMLDivElement;   // you verified it's a div
const n = (value as unknown) as number;   // double assertion — a red flag, avoid

Worked example: TS2322 from a mistyped API payload

This is the most common real-world trigger on a JSON-heavy app: a hand-written interface that has drifted from what the API actually returns. The API sends an id as a quoted string, your interface says number, and the assignment fails:

interface User { id: number; name: string; }

// The API actually returns: { "id": "42", "name": "Ada" }
const res = await fetch("/api/user");
const user: User = await res.json();
// error TS2322: Type 'string' is not assignable to type 'number'. (on id)

The fix is accurate types, not a cast. Generate the interface from a real response with JSON to TypeScript — it types id as string to match the data — then convert deliberately if your app needs a number:

interface ApiUser { id: string; name: string; }    // generated from a real sample

const apiUser = (await res.json()) as ApiUser;
const user: User = { ...apiUser, id: Number(apiUser.id) };   // explicit conversion

TS2322 in React

React surfaces TS2322 in a few recurring spots:

// 1) useState infers from the initial value
const [user, setUser] = useState(null);          // inferred type: null
setUser({ id: 1, name: "Ada" });                 // ❌ TS2322
const [user2, setUser2] = useState<User | null>(null);   // ✅ type it

// 2) a typed prop given the wrong type
function Badge({ count }: { count: number }) { return <span>{count}</span>; }
<Badge count="3" />                              // ❌ Type 'string' is not assignable to type 'number'
<Badge count={3} />                              // ✅

// 3) controlled input value can't be null
<input value={name} />    // if name is string | null -> TS2322; use {name ?? ""}

Common variants of this message

Debugging checklist

• ✓ Read to the innermost error line — it names the real field and types
• ✓ Decide which is correct (value or declared type) and fix that one
• ✓ ... | undefined / | null? Narrow with a guard or ?? default
• ✓ Both types valid? Widen the target to a union
• ✓ React useState? Give it a type argument: useState<T | null>(null)
• ✓ From API JSON? Generate the interface with JSON to TypeScript and convert deliberately
• ✓ as only when you truly know more than the compiler