Existe-t-il un moyen de décrire les méthodes du cycle de vie d'un produit react dans un script ?

Question

J'ai parfois un composant React qui ressemble à ceci :

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

    // ...
}

Le code ci-dessus est cassé du point de vue de TS : TS2531: Object is possibly 'null' en componentWillUnmount() .

Mais un composant React ne peut pas être démonté avant d'être monté. Donc en fait this.source ne sera jamais null en componentWillUnmount() .

Puis-je exprimer cet invariant en termes de TS ? Je sais que je peux simplement écrire (this.source as IExternalDataSource) mais c'est moche.

Nous vous remercions.

Answer 1

Il n'existe aucun moyen d'exprimer l'état d'un objet dans une méthode. Les types de champs s'appliquent à toutes les méthodes. Vous pouvez seulement effectuer une vérification redondante supplémentaire ou utiliser une assertion "not null".

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