typescript 如何在构造函数中异步请求数据时初始化只读类成员

Question

Typescript 允许在构造函数中初始化只读类成员，但是如果数据作为对异步请求的响应出现怎么办？

class Test { 
  readonly data;
  constructor() {
    setTimeout(() => {
        this.data = 15 // error
    });
  }
}

Answer 1

据我所知，typescript 只允许您在构造函数中设置一个只读类属性。由于您将其设置为回调函数的一部分(即使回调在构造函数中)， typescript 将产生错误。

解决这个问题的方法是做两件事之一。为了快速简便地修复，请在需要设置它时显式覆盖它，可以通过强制转换 this 来实现。成为any ，或通过添加 // @ts-ignore在该行上方发表评论。所以对于你的例子:

class Test { 
  readonly data;
  constructor() {
    setTimeout(() => {
        (this as any).data = 15 // No error, manually overridden

        // OR:

        // @ts-ignore
        this.data = 15  
    });
  }
}

否则，您可以使用 getter 和 setter 来允许您在类内自由设置属性，但对于类的所有使用者，它将显示为只读:

class Test { 
  private _data;
  constructor() {
    setTimeout(() => {
        this._data = 15 // No error
    });
    }

    get data() {
        return this._data;
    }

}

const test = new Test();

let d = test.data;
test.data = "foo"; // Cannot assign to 'data' because it is constant or readonly