TypeScript类如何初始化依赖多个Promise的变量？

方案1：使用静态异步工厂方法（最推荐） #

该方案完全规避了构造函数不能异步的限制，是TypeScript场景下的最佳实践，不会产生类型报错，也能保证返回的实例已经完成全部初始化逻辑。

import puppeteer, { type Page, type Browser } from 'puppeteer';

class Puppet {
  private page: Page;
  private browser: Browser;
  // 将构造函数设为私有，禁止外部直接new，强制走工厂方法创建实例
  private constructor() {}

  static async create(): Promise<Puppet> {
    const instance = new Puppet();
    // 完整执行初始化逻辑后再返回实例
    instance.browser = await puppeteer.launch({ headless: true });
    instance.page = await instance.browser.newPage();
    await instance.page.goto('你的目标url');
    return instance;
  }

  // 其他自定义类方法
  async doSomething() {
    await this.page.click('目标元素选择器');
  }
}

// 调用方式
const puppet = await Puppet.create();

方案2：将page声明为Promise类型 #

如果你的业务场景允许每次调用page时都做await操作，可以直接把page的类型定义为Promise<Page>，支持直接new实例：

class Puppet {
  private page: Promise<Page>;
  private browser: Promise<Browser>;
  
  constructor() {
    // 直接把初始化的Promise赋值给属性
    this.browser = puppeteer.launch({ headless: true });
    this.page = this.browser.then(browser => browser.newPage());
    // 如果需要把goto逻辑也包含在初始化里
    this.page = this.page.then(async page => {
      await page.goto('你的目标url');
      return page;
    })
  }

  async doSomething() {
    const page = await this.page;
    await page.click('目标元素选择器');
  }
}

// 调用方式
const puppet = new Puppet();

临时修复TS报错方案（不推荐） #

如果你一定要沿用原本的写法，可以给page属性加明确赋值断言规避TS报错，但需要自行保证调用page相关方法前初始化已经完成，否则会出现运行时undefined错误：

class Puppet {
  // 加!告诉TypeScript这个属性后续会被初始化，也可以写为 private page?: puppeteer.Page
  private page!: puppeteer.Page;
  
  constructor() {
    void this.initialize();
  }

  async initialize(){
    const browser = await puppeteer.launch({headless:true});
    this.page = await browser.newPage();
    await this.page.goto(this.url);
  }
}

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