Opravit problém uzlu toku „property querySelector of unknown“

Flow, statický typ kontroly používaný v mnoha projektech React, občas působí jako dar a prokletí; dar v tom, že identifikuje slabiny ve vašem kódu, a prokletí, že někdy máte pocit, že zbytečně upravujete svůj kód, aby vyhovoval Flow. Začal jsem si vážit Flow, ale to neznamená, že strávím další hodiny hledáním nových způsobů kódování.

Nedávno jsem narazil na problém, kdy jsem se dotazoval na uzel v prvku React a pak jsem použil querySelector na tomto uzlu najít dítě; překvapivě Flow měl problém:

Cannot call node.querySelector because property querySelector of unknown
type [1] is not a function.

71│ const { maxHeight } = this.state;
72│ const node = ReactDOM.findDOMNode(this);
[1] 73│ if (node && node.querySelector) {
74│ const popupNode = node.querySelector(".preview-popup");
75│ if (popupNode) {
76│ popupNode.style.maxHeight = `${maxHeight}px`;
77│ }

/private/tmp/flow/flowlib_34a4c903/react-dom.js
[1] 14│ ): null | Element | Text;

Found 1 error

Ukázalo se, že findDOMNode může vrátit typ Text , a tedy querySelectorAll bude undefined; Flow nemá rád undefined . Řešením je použít instanceOf s HTMLElement :

if (node instanceOf HTMLElement) {
    // ...
}

Řešení dává smysl, ale část mě tiše zuří, že && node.querySelector nekvalifikuje se. Nakonec je Flow tak užitečný, že malé změny, jako je tato, mě příliš nerozruší.