How to fix Object is possibly 'null' in TypeScript

// BEFORE: Error - Object is possibly 'null'
const element = document.getElementById("myButton");
element.addEventListener("click", handleClick); // Error!

// AFTER: Add null check
const element = document.getElementById("myButton");
if (element !== null) {
  element.addEventListener("click", handleClick); // OK!
}

// Alternative: Combined null/undefined check
if (element != null) { // Checks both null and undefined
  element.addEventListener("click", handleClick);
}

function processUser(user: User | null) {
  // Error if you don't check
  console.log(user.name); // Error: Object is possibly 'null'

  // Fix with null check
  if (user !== null) {
    console.log(user.name); // OK!
  }
}

// BEFORE: Error accessing nested properties
const city = user.address.city; // Error if user or address is null

// AFTER: Use optional chaining
const city = user?.address?.city; // Returns undefined if any step is null

// Combined with nullish coalescing for default values
const city = user?.address?.city ?? "Unknown";

// Method calls with optional chaining
const result = apiResponse?.data?.map(item => item.name);

// DOM element example
document.getElementById("myButton")?.addEventListener("click", handleClick);

// tsconfig.json
{
  "compilerOptions": {
    "strict": true, // Includes strictNullChecks
    // OR enable specifically:
    "strictNullChecks": true
  }
}

{
  "compilerOptions": {
    "strictNullChecks": true,
    "noImplicitAny": false, // Disable other strict options temporarily
    "strict": false
  }
}

// @ts-ignore - TODO: Fix null safety
const element = document.getElementById("myButton");
element.addEventListener("click", handleClick);

// Type guard function
function isNotNull<T>(value: T | null): value is T {
  return value !== null;
}

// Usage
const elements = Array.from(document.querySelectorAll(".item"))
  .filter(isNotNull); // TypeScript knows elements are not null

elements.forEach(el => {
  el.classList.add("active"); // No error - TypeScript knows el is HTMLElement
});

// Custom type guard for complex checks
interface User {
  id: string;
  name: string;
}

function isValidUser(user: User | null): user is User {
  return user !== null && user.id !== undefined;
}

const user = getUserById("123");
if (isValidUser(user)) {
  console.log(user.name); // TypeScript knows user is User, not null
}

function processValue(value: string | null) {
  if (typeof value === "string") {
    console.log(value.length); // OK - value is string
  } else {
    console.log("Value is null"); // OK - value is null
  }
}

// Tell TypeScript this element definitely exists
const button = document.getElementById("myButton")!;
button.addEventListener("click", handleClick);

// For React refs
const inputRef = useRef<HTMLInputElement>(null);

// Later, when you know it's attached
inputRef.current!.focus();

function assertNotNull<T>(value: T | null, message?: string): asserts value is T {
  if (value === null) {
    throw new Error(message || "Value is null");
  }
}

const element = document.getElementById("myButton");
assertNotNull(element, "Button element not found");
element.addEventListener("click", handleClick); // TypeScript knows element is not null

import { useRef, useEffect } from "react";

function MyComponent() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    // Error: Object is possibly 'null'
    inputRef.current.focus(); // Error!

    // Fix: Check if ref is attached
    if (inputRef.current !== null) {
      inputRef.current.focus();
    }

    // Or use optional chaining
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} />;
}

interface Props {
  title?: string; // Optional prop
  items?: string[]; // Optional array
}

function MyComponent({ title, items }: Props) {
  // Error if you don't handle optional props
  const upperTitle = title.toUpperCase(); // Error: Object is possibly 'undefined'

  // Fix with nullish coalescing
  const upperTitle = (title ?? "Default").toUpperCase();

  // For arrays, provide empty default
  const itemCount = (items ?? []).length;

  return (
    <div>
      <h1>{upperTitle}</h1>
      <ul>
        {(items ?? []).map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

function UserProfile({ user }: { user: User | null }) {
  if (user === null) {
    return <div>Loading...</div>;
  }

  // TypeScript knows user is not null here
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}