How to fix Object is possibly 'null' or 'undefined' in TypeScript

let element: HTMLElement | null = document.getElementById('my-element');

// Error: Object is possibly 'null'
// element.style.color = 'red';

// Fixed with null check
if (element !== null) {
  element.style.color = 'red';
}

// Or using truthiness check
if (element) {
  element.style.color = 'red';
}

interface User {
  profile?: {
    name?: string;
  };
}

const user: User = {};

// Error: Object is possibly 'undefined'
// const userName = user.profile.name;

// Fixed with optional chaining
const userName = user.profile?.name; // Returns undefined if any part is undefined

// Combine with nullish coalescing for defaults
const safeName = user.profile?.name ?? 'Anonymous';

let element = document.getElementById('my-element')!; // Note the !
element.style.color = 'red'; // No error

// Or use it at the point of access
const name = getUser().name!;

function getUsername(user: { name?: string | null }) {
  // Error: Object is possibly 'null' or 'undefined'
  // return user.name.toUpperCase();
  
  // Fixed with nullish coalescing
  return (user.name ?? 'Guest').toUpperCase();
}

// Works with optional chaining
const length = user.profile?.name?.length ?? 0;

function isNotNull<T>(value: T | null | undefined): value is T {
  return value !== null && value !== undefined;
}

const items = [1, null, 3, undefined, 5];
const validItems = items.filter(isNotNull); // Type: number[]

// Custom type guard for specific types
function isHTMLElement(el: any): el is HTMLElement {
  return el instanceof HTMLElement;
}

const element = document.getElementById('my-element');
if (isHTMLElement(element)) {
  element.style.color = 'red';
}

// tsconfig.json
{
  "compilerOptions": {
    // Disable strict null checking (not recommended)
    "strictNullChecks": false,
    
    // Or use looser settings
    "strict": false // Disables all strict checks
  }
}