Question

有时我会有一个类似如下的React组件：

public enum Condition {
  NEW, USED, WRECKED, REBUILT, RESTORED;
};

从TS的角度来看，上面的代码是无效的：interface IExternalDataSource { fetch(): Promise<unknown> free(): void } function getSource(): IExternalDataSource { // some logic with side-effects } class Foo extends React.Component { private source: IExternalDataSource | null = null; componentDidMount(): void { this.source = getSource(); this.source.fetch().then( (value) => this.setState({ /* ... */ }) ); } componentWillUnmount(): void { this.source.free(); } // ... }中的TS2531: Object is possibly 'null'。

但是React组件无法在安装之前被卸载。因此，实际上componentWillUnmount()在this.source中永远不会是null。

我可以用TS表示此不变式吗？我知道我只能写componentWillUnmount()，但这很丑。

谢谢。

Answer 1

在方法中无法表达对象的状态。字段类型适用于所有方法。您只能执行额外的冗余检查，或使用非null的断言

componentWillUnmount(): void {
    this.source!.free();
}

有没有办法在打字稿中描述反应生命周期方法？

1 个答案: