reactjs - Finns det ett sätt att beskriva en React-livscykelmetod i TypeScript?

Ibland har jag en React-komponent som ser ut så här:

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();
    }

    // ...
}

Koden ovan är bruten ur TS:s synvinkel: TS2531: Objekt är möjligen 'null' i componentWillUnmount().

Men en React-komponent kan inte avmonteras innan den är monterad. Så i själva verket kommer this.source aldrig att vara null i componentWillUnmount().

Kan jag uttrycka denna invariant i TS-termer? Jag vet att jag bara kan skriva (this.source as IExternalDataSource) men det är fult.

Tack.

Svar #1

Det finns inget sätt att uttrycka ett objekts tillstånd i en metod. Fälttyperna gäller för alla metoder. Du kan bara utföra en extra överflödig kontroll, eller använda en not null-assertion

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

Relaterade artiklar