TypeScript类构造函数执行顺序异常如何解决

JavaScript/TypeScript 类的执行规则里，写在类体中的属性初始化表达式，会在构造函数内手写逻辑执行前、按属性声明顺序依次运行。
你当前代码里private secondClass: SecondClass = new SecondClass(this.token);属于类属性初始化逻辑，会比你写在constructor里的this.token = t更早执行，此时token属性还未被赋值，值为undefined，就出现了你看到的日志顺序和传值错误。

你可以任选以下一种方式调整执行顺序：

• 把依赖类的实例化逻辑移到构造函数内，放在token赋值完成之后执行：

// Main class
export class MainClass {
  token: string;
  private secondClass: SecondClass;

  constructor(t: string) {
    console.log("MainClass constructor", t);
    this.token = t;
    // token赋值完成后再实例化依赖
    this.secondClass = new SecondClass(this.token);
  }
}

// Second class
export class SecondClass {
  constructor(t: string) {
    console.log("SecondClass constructor",t);
  }
}


// Client code
const app = new MainClass("1234");

// 执行日志顺序符合预期
// --> "MainClass constructor 1234"
// --> "SecondClass constructor 1234"

• 使用TS的参数属性语法声明token，让token的挂载赋值时机早于普通类属性的初始化：

// Main class
export class MainClass {
  // 构造参数前加访问修饰符，会自动将参数挂载为类属性，赋值时机早于普通类字段初始化
  constructor(private token: string) {
    console.log("MainClass constructor", token);
  }
  private secondClass: SecondClass = new SecondClass(this.token);
}

两种方式都能保证实例化SecondClass时已经拿到了正确的token值。

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