How to fix Type 'undefined' is not assignable to type 'string' in TypeScript

interface User {
  name?: string;
}

const user: User = { name: undefined };

// Error: Type 'string | undefined' is not assignable to type 'string'
const userName: string = user.name;

// Fixed: Provide default value
const userName: string = user.name ?? 'Guest';

// Works with environment variables
const apiKey: string = process.env.API_KEY ?? 'default-key';

// Works with array methods
const firstItem: string = items.find(x => x.active) ?? 'none';

interface Config {
  apiUrl?: string;
}

const config: Config = loadConfig();

// Option 1: If statement
if (config.apiUrl !== undefined) {
  const url: string = config.apiUrl; // TypeScript knows it's string here
  makeRequest(url);
}

// Option 2: Early return
if (!config.apiUrl) {
  throw new Error('API URL is required');
}
const url: string = config.apiUrl; // Safe after check

// Option 3: Ternary operator
const url: string = config.apiUrl !== undefined ? config.apiUrl : 'https://default.com';

interface User {
  name?: string;
}

// Use with caution - only when you're certain
const user: User = { name: 'Alice' };
const userName: string = user.name!; // Tells TypeScript to trust you

// Common with DOM elements
const element: HTMLElement = document.getElementById('myId')!;

// With array methods when you know the element exists
const activeItem: string = items.find(x => x.id === currentId)!;

interface User {
  nickname?: string;
}

const user: User = { nickname: undefined };

// Instead of forcing it to string
// const name: string = user.nickname; // Error

// Accept that it might be undefined
const name: string | undefined = user.nickname; // OK

// Then handle both cases when using it
if (name !== undefined) {
  console.log(name.toUpperCase()); // Safe to use string methods
} else {
  console.log('No nickname set');
}

// Or use optional chaining
console.log(name?.toUpperCase());

// Before: allows undefined
interface User {
  email?: string;
}

// After: email is required
interface User {
  email: string;
}

// Now TypeScript enforces that email must be provided
const user: User = {
  email: '[email protected]' // Must provide this
};

const email: string = user.email; // No error

// For existing code, validate at creation time
function createUser(email: string | undefined): User {
  if (!email) {
    throw new Error('Email is required');
  }
  return { email }; // TypeScript knows email is string here
}

// Define an assertion function
function assertString(value: string | undefined, name: string): asserts value is string {
  if (value === undefined) {
    throw new Error(`${name} must be a string, got undefined`);
  }
}

interface Config {
  apiKey?: string;
}

const config: Config = loadConfig();

// Use the assertion
assertString(config.apiKey, 'API Key');

// After assertion, TypeScript knows apiKey is string
const apiKey: string = config.apiKey; // No error

// Reusable for multiple values
assertString(process.env.DATABASE_URL, 'DATABASE_URL');
const dbUrl: string = process.env.DATABASE_URL;