时间戳

首页 > 解决方案 > 有没有办法在打字稿中描述反应生命周期方法？

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

问题描述

我有时有一个看起来像这样的 React 组件：

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'从 TS: in的角度来看，上面的代码被破坏了componentWillUnmount()。

但是 React 组件在挂载之前不能被卸载。所以实际上this.source永远不会null在componentWillUnmount()。

我可以用 TS 术语表达这个不变量吗？我知道我可以写(this.source as IExternalDataSource)，但这很难看。

谢谢你。

标签： reactjstypescript

解决方案

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

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

推荐阅读