How to fix Parameter of a class property initializer cannot reference an identifier declared in the class in TypeScript

// WRONG - causes the error
class User {
  name: string = "John";
  greeting: string = `Hello, ${this.name}!`; // Error: references 'name'
}

// CORRECT - initialize in constructor
class User {
  name: string;
  greeting: string;

  constructor() {
    this.name = "John";
    this.greeting = `Hello, ${this.name}!`; // Works fine
  }
}

// Alternative with constructor parameters
class User {
  name: string;
  greeting: string;

  constructor(name: string = "John") {
    this.name = name;
    this.greeting = `Hello, ${this.name}!`;
  }
}

// WRONG - computed value in property initializer
class Rectangle {
  width: number = 10;
  height: number = 5;
  area: number = this.width * this.height; // Error: references other properties
}

// CORRECT - use a getter
class Rectangle {
  width: number = 10;
  height: number = 5;

  get area(): number {
    return this.width * this.height; // Computed when accessed
  }
}

// Usage
const rect = new Rectangle();
console.log(rect.area); // 50
rect.width = 20;
console.log(rect.area); // 100 (automatically recomputed)

// For expensive computations, consider caching
class Rectangle {
  width: number = 10;
  height: number = 5;
  private _area?: number;

  get area(): number {
    if (this._area === undefined) {
      this._area = this.width * this.height;
    }
    return this._area;
  }

  set width(value: number) {
    this.width = value;
    this._area = undefined; // Invalidate cache
  }

  set height(value: number) {
    this.height = value;
    this._area = undefined; // Invalidate cache
  }
}

// WRONG - circular dependency
class Config {
  apiUrl: string = "https://api.example.com";
  endpoint: string = `${this.apiUrl}/users`; // Error
  fullUrl: string = `${this.endpoint}/list`; // Would also error
}

// CORRECT - use methods or separate concerns
class Config {
  apiUrl: string = "https://api.example.com";

  getEndpoint(path: string = "users"): string {
    return `${this.apiUrl}/${path}`;
  }

  getFullUrl(endpointPath: string = "users", action: string = "list"): string {
    return `${this.apiUrl}/${endpointPath}/${action}`;
  }
}

// Alternative: Factory pattern
class UrlBuilder {
  constructor(private baseUrl: string) {}

  endpoint(path: string): string {
    return `${this.baseUrl}/${path}`;
  }

  fullUrl(endpointPath: string, action: string): string {
    return `${this.baseUrl}/${endpointPath}/${action}`;
  }
}

const api = new UrlBuilder("https://api.example.com");
console.log(api.endpoint("users")); // https://api.example.com/users
console.log(api.fullUrl("users", "list")); // https://api.example.com/users/list

// WRONG - instance property referencing another instance property
class Logger {
  prefix: string = "[APP]";
  format: string = `${this.prefix} %s`; // Error
}

// CORRECT - use static if value is shared
class Logger {
  static prefix: string = "[APP]";
  format: string = `${Logger.prefix} %s`; // OK - references static property

  log(message: string): void {
    console.log(this.format, message);
  }
}

// Alternative: Class-level constants
class Constants {
  static readonly API_URL = "https://api.example.com";
  static readonly TIMEOUT = 5000;
}

class ApiClient {
  url: string = Constants.API_URL; // OK - references static constant
  timeout: number = Constants.TIMEOUT;
}

// For computed static values
class MathUtils {
  static readonly PI = Math.PI;
  static readonly TAU = 2 * MathUtils.PI; // OK - references static property
}

// WRONG - complex circular dependencies
class UserProfile {
  user: User = new User();
  settings: Settings = new Settings(this.user); // Error if Settings needs User
  preferences: Preferences = new Preferences(this.settings); // Also error
}

// CORRECT - deferred initialization
class UserProfile {
  user?: User;
  settings?: Settings;
  preferences?: Preferences;

  constructor(userData: any) {
    this.initialize(userData);
  }

  private initialize(userData: any): void {
    this.user = new User(userData);
    this.settings = new Settings(this.user); // Now safe
    this.preferences = new Preferences(this.settings);
  }

  // Optional: lazy initialization
  getSafeSettings(): Settings {
    if (!this.settings) {
      if (!this.user) {
        throw new Error("User not initialized");
      }
      this.settings = new Settings(this.user);
    }
    return this.settings;
  }
}

// Using builder pattern
class UserProfileBuilder {
  static build(userData: any): UserProfile {
    const user = new User(userData);
    const settings = new Settings(user);
    const preferences = new Preferences(settings);

    const profile = new UserProfile();
    profile.user = user;
    profile.settings = settings;
    profile.preferences = preferences;

    return profile;
  }
}

// tsconfig.json - NOT RECOMMENDED as primary solution
{
  "compilerOptions": {
    // These might suppress the error but don't fix the underlying issue:
    "strictPropertyInitialization": false,
    "strict": false,

    // Better approach: fix the code and keep these enabled
    "strictPropertyInitialization": true,
    "strict": true,
    "noImplicitThis": true
  }
}

class Example {
  dependency!: OtherClass; // Definite assignment assertion
  value: string = this.dependency.getValue(); // Still might fail at runtime!
}