TypeScript类构造函数剩余参数使用及绑定方法初始化报错解决

尝试在TypeScript类的构造函数中使用剩余参数作为readonly属性时遇到两个问题：

1. 无法直接将剩余参数声明为参数属性：

class Logger {
  constructor(
    // 错误：A parameter property cannot be declared using a rest parameter.(1317)
    readonly ...tags: string[]
  ) {}
}

2. 手动声明readonly属性后，类字段log的初始化顺序导致报错：

class Logger {
  readonly tags: string[];

  constructor(...tags: string[]) {
    this.tags = tags;
  }

  // 错误：Property 'tags' is used before its initialization.(2729)
  log = console.log.bind(console, `${this.tags}: %s`);
}

原因是TypeScript编译时会将类字段的初始化代码移到构造函数的最前端，早于this.tags = tags的赋值，导致this.tags未初始化就被使用。期望的编译结果是log的初始化在this.tags赋值之后：

class Logger {
  constructor(...tags) {
    this.tags = tags;
  }
  log = console.log.bind(console, `${this.tags}: %s`);
}

方案1：在构造函数中手动初始化log #

直接将log的绑定逻辑放在构造函数内this.tags = tags之后，确保执行顺序符合预期：

class Logger {
  readonly tags: string[];
  log: (message: string) => void;

  constructor(...tags: string[]) {
    this.tags = tags;
    // 确保在tags赋值后再绑定log
    this.log = console.log.bind(console, `${this.tags}: %s`);
  }
}

优点：完全符合预期的执行顺序，无TypeScript报错，行为可控。
缺点：需要手动声明log的类型，无法利用类字段的自动类型推断。

方案2：使用非空断言标记tags已初始化 #

通过!非空断言告诉TypeScript，tags属性会在构造函数中完成初始化，即使编译器无法检测到顺序：

class Logger {
  // 使用!断言tags会被初始化
  readonly tags!: string[];

  constructor(...tags: string[]) {
    this.tags = tags;
  }

  log = console.log.bind(console, `${this.tags}: %s`);
}

优点：写法简洁，保留类字段的声明方式。
缺点：属于编译期断言，若后续修改构造函数导致tags未初始化，会引入运行时错误，需谨慎使用。

方案3：使用getter延迟初始化log #

通过getter实现log的懒加载，确保第一次访问log时tags已经完成初始化：

class Logger {
  readonly tags: string[];
  private _log?: (message: string) => void;

  constructor(...tags: string[]) {
    this.tags = tags;
  }

  get log(): (message: string) => void {
    if (!this._log) {
      this._log = console.log.bind(console, `${this.tags}: %s`);
    }
    return this._log;
  }
}

优点：彻底避免初始化顺序问题，且仅在第一次使用log时执行绑定逻辑。
缺点：每次访问log都会触发getter检查（性能开销可忽略），写法相对繁琐。

内容的提问来源于stack exchange，提问作者Arst