How to fix Private field '#x' must be declared in an enclosing class in TypeScript

// BEFORE: Error - private field outside class
class User {
  #password: string;

  constructor(password: string) {
    this.#password = password;
  }
}

// Standalone function causing error
const validatePassword = (user: User) => {
  return user.#password.length > 8; // Error: Private field '#password' must be declared...
};

// AFTER: Move function inside class as method
class User {
  #password: string;

  constructor(password: string) {
    this.#password = password;
  }

  // Now a class method - can access #password
  validatePassword(): boolean {
    return this.#password.length > 8; // OK
  }
}

const user = new User("secret123");
console.log(user.validatePassword()); // OK: true

class Timer {
  #startTime: number;

  constructor() {
    this.#startTime = Date.now();
  }

  // Class method that accesses private field
  getElapsed(): number {
    return Date.now() - this.#startTime;
  }
}

const timer = new Timer();

// BEFORE: Error - loses 'this' context
setTimeout(timer.getElapsed, 1000); // Error: Private field '#startTime'...

// AFTER: Bind the method to preserve context
setTimeout(timer.getElapsed.bind(timer), 1000); // OK

// Or use arrow function that captures 'this'
setTimeout(() => timer.getElapsed(), 1000); // Also OK

// BEFORE: Error in React component
class MyComponent extends React.Component {
  #state = { count: 0 };

  // Arrow function property - still has access issues
  handleClick = () => {
    this.#state.count++; // May cause context issues
    this.forceUpdate();
  };

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

// AFTER: Use class method with bind in constructor
class MyComponent extends React.Component {
  #state = { count: 0 };

  constructor(props: any) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  // Regular class method
  handleClick() {
    this.#state.count++; // OK - proper 'this' context
    this.forceUpdate();
  }

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

// OR: Use TypeScript's property initializer syntax
class MyComponent extends React.Component {
  #state = { count: 0 };

  // This works correctly with private fields
  handleClick = (): void => {
    this.#state.count++; // OK - arrow function captures 'this'
    this.forceUpdate();
  };

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

class Config {
  #apiKey: string;
  #endpoint: string;

  constructor(apiKey: string, endpoint: string) {
    this.#apiKey = apiKey;
    this.#endpoint = endpoint;
  }

  // Public getters for controlled access
  getApiKey(): string {
    return this.#apiKey;
  }

  getEndpoint(): string {
    return this.#endpoint;
  }
}

const config = new Config("key-123", "https://api.example.com");

// BEFORE: Error - cannot destructure private fields
const { #apiKey, #endpoint } = config; // Error

// AFTER: Use getter methods
const apiKey = config.getApiKey(); // OK
const endpoint = config.getEndpoint(); // OK

// OR: Create a public interface for the data you need
interface ConfigData {
  apiKey: string;
  endpoint: string;
}

class Config {
  #apiKey: string;
  #endpoint: string;

  constructor(apiKey: string, endpoint: string) {
    this.#apiKey = apiKey;
    this.#endpoint = endpoint;
  }

  // Method that returns public data structure
  getConfigData(): ConfigData {
    return {
      apiKey: this.#apiKey,
      endpoint: this.#endpoint,
    };
  }
}

const config = new Config("key-123", "https://api.example.com");
const { apiKey, endpoint } = config.getConfigData(); // OK

// Using JavaScript private fields (#) - strict rules
class SecureClass {
  #secret: string;

  constructor(secret: string) {
    this.#secret = secret;
  }

  // Can only access #secret in class methods
  getSecret(): string {
    return this.#secret;
  }
}

// Using TypeScript 'private' keyword - more flexible
class FlexibleClass {
  private secret: string;

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

  // Can use in more contexts (though still compile-time only)
  createLogger() {
    // This works with 'private' but not with #
    return () => console.log(this.secret);
  }
}

const flexible = new FlexibleClass("hidden");
const logger = flexible.createLogger();
logger(); // OK: "hidden"

// Key differences:
// #privateField: Runtime privacy, strict access rules
// private field: Compile-time only, more flexible usage
// Choose based on your needs

// BEFORE: Complex callback chain with private field access
class DataProcessor {
  #data: number[];

  constructor(data: number[]) {
    this.#data = data;
  }

  processWithCallback(callback: (value: number) => void) {
    // Problem: callback tries to access #data
    this.#data.forEach(value => {
      // Can't use #data here if callback needs it
      callback(value);
    });
  }
}

// AFTER: Pass needed data as parameters
class DataProcessor {
  #data: number[];

  constructor(data: number[]) {
    this.#data = data;
  }

  processWithCallback(callback: (value: number, metadata: string) => void) {
    const metadata = this.#getMetadata(); // Compute inside class
    this.#data.forEach(value => {
      callback(value, metadata); // Pass data as parameter
    });
  }

  #getMetadata(): string {
    return `Processing ${this.#data.length} items`;
  }
}

// OR: Use a different architecture
class DataProcessor {
  #data: number[];

  constructor(data: number[]) {
    this.#data = data;
  }

  // Return processed data instead of using callbacks
  process(): ProcessedData[] {
    return this.#data.map(value => ({
      value,
      metadata: this.#getMetadata(),
      timestamp: Date.now(),
    }));
  }

  #getMetadata(): string {
    return `Processing ${this.#data.length} items`;
  }
}