Object is possibly 'null'

Option 1: Null check with if statement

const el = document.getElementById("app");
if (el) {
  el.addEventListener("click", handler); // OK
}

Option 2: Non-null assertion operator (!) — use carefully

const el = document.getElementById("app")!;
// Tells TypeScript: "trust me, this is never null"
// Will throw at runtime if it actually is null

Option 3: Optional chaining (?.) to skip null safely

const el = document.getElementById("app");
el?.addEventListener("click", handler); // silently skips if null

Option 4: Nullish coalescing (??) to provide a fallback

const user = users.find(u => u.id === id) ?? defaultUser;
console.log(user.name); // safe — always has a value

What does TS2531 mean?

TS2531 means you're using a value that TypeScript knows might be null without checking first. It's a compile-time warning that protects you from null reference errors at runtime.

How is TS2531 different from TS2532?

TS2531 is 'possibly null', TS2532 is 'possibly undefined'. They're the same concept for different nullish values. Both require you to handle the nullish case before accessing properties.

Should I use ! (non-null assertion) to fix TS2531?

Only when you're absolutely certain the value can't be null at that point. The ! operator tells TypeScript to trust you — if you're wrong, you get a runtime TypeError instead of a compile error.

TS2531 on document.getElementById — how to fix?

Use an if check: if (el) { el.addEventListener(...) }, or use optional chaining: el?.addEventListener(...). getElementById returns HTMLElement | null because the element may not exist in the DOM.

Why does TS2531 only appear with strict mode?

TS2531 requires strictNullChecks (part of strict: true). Without it, null is assignable to every type, so TypeScript doesn't distinguish nullable from non-nullable values.