Question

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

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

Answer 1

据我所知，typescript只允许你在构造函数中设置一个readonly类属性。由于您将其设置为回调函数的一部分（即使回调在构造函数中），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来允许您从类中自由设置属性，但是对于该类的所有使用者，它将显示为readonly：

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

Answer 2

根据相关类的用例，数据可以从组件外部传递并传递给组件。

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

2 个答案: