How to fix Parameter 'x' cannot be referenced in another parameter's initializer in TypeScript

// WRONG - parameter b references parameter a
function calculate(a: number = 10, b: number = a * 2) {
  return a + b;
}
// Error: Parameter 'a' cannot be referenced in another parameter's initializer

// CORRECT - use object parameter with destructuring
function calculate({ a = 10, b = a * 2 }: { a?: number; b?: number } = {}) {
  return a + b;
}

// Usage remains similar
calculate(); // returns 30 (10 + 20)
calculate({ a: 5 }); // returns 15 (5 + 10)
calculate({ a: 5, b: 3 }); // returns 8 (5 + 3)

// WRONG - dependent default values
function createUser(
  name: string,
  displayName: string = name.toUpperCase(),
  email: string = `${name.toLowerCase()}@example.com`
) {
  return { name, displayName, email };
}

// CORRECT - handle defaults inside function
function createUser(
  name: string,
  displayName?: string,
  email?: string
) {
  const finalDisplayName = displayName ?? name.toUpperCase();
  const finalEmail = email ?? `${name.toLowerCase()}@example.com`;

  return { name, displayName: finalDisplayName, email: finalEmail };
}

// Alternative with destructuring
function createUser(options: {
  name: string;
  displayName?: string;
  email?: string;
}) {
  const { name, displayName = name.toUpperCase(), email = `${name.toLowerCase()}@example.com` } = options;
  return { name, displayName, email };
}

// Function overloads provide type safety for different parameter patterns
function configure(options: { width: number; height?: number }): void;
function configure(width: number, height?: number): void;
function configure(
  widthOrOptions: number | { width: number; height?: number },
  height?: number
): void {
  let actualWidth: number;
  let actualHeight: number;

  if (typeof widthOrOptions === 'object') {
    actualWidth = widthOrOptions.width;
    actualHeight = widthOrOptions.height ?? actualWidth; // Now safe
  } else {
    actualWidth = widthOrOptions;
    actualHeight = height ?? actualWidth; // Now safe
  }

  console.log(`Width: ${actualWidth}, Height: ${actualHeight}`);
}

// All these calls work:
configure({ width: 100 });
configure(100);
configure({ width: 100, height: 200 });
configure(100, 200);

// WRONG - height depends on width
function createBox(width: number = 100, height: number = width) {
  return { width, height };
}

// CORRECT - independent defaults
function createBox(width: number = 100, height: number = 100) {
  return { width, height };
}

// OR use a configuration object
function createBox(options: { width?: number; height?: number } = {}) {
  const width = options.width ?? 100;
  const height = options.height ?? width; // Now safe inside function body
  return { width, height };
}

// For square boxes specifically
function createSquare(size: number = 100) {
  return createBox({ width: size, height: size });
}

// Advanced technique - use with caution
function processData<T>(
  data: T,
  // Use non-null assertion to tell TypeScript we know what we're doing
  processor: (item: T) => void = (item) => console.log(item!)
) {
  processor(data);
}

// Better alternative - factory function
function createProcessor<T>(defaultProcessor?: (item: T) => void) {
  return function processData(data: T, processor = defaultProcessor ?? ((item) => console.log(item))) {
    processor(data);
  };
}

// Usage
const processString = createProcessor<string>();
processString("hello"); // logs "hello"
processString("world", (s) => console.log(s.toUpperCase())); // logs "WORLD"

// Builder pattern for complex object creation
class UserBuilder {
  private name: string;
  private displayName?: string;
  private email?: string;

  constructor(name: string) {
    this.name = name;
  }

  withDisplayName(displayName: string): this {
    this.displayName = displayName;
    return this;
  }

  withEmail(email: string): this {
    this.email = email;
    return this;
  }

  build() {
    return {
      name: this.name,
      displayName: this.displayName ?? this.name.toUpperCase(),
      email: this.email ?? `${this.name.toLowerCase()}@example.com`,
    };
  }
}

// Usage
const user1 = new UserBuilder("john").build();
const user2 = new UserBuilder("jane")
  .withDisplayName("Jane Doe")
  .withEmail("[email protected]")
  .build();

// Configuration object factory
function createUserConfig(name: string, overrides?: Partial<{ displayName: string; email: string }>) {
  const config = {
    name,
    displayName: name.toUpperCase(),
    email: `${name.toLowerCase()}@example.com`,
    ...overrides,
  };
  return config;
}