Raffination Fluss Union Typ

Question

Bitte beachten Sie den Code unten. Ich muss zwei Castings machen, um Flussfehler zu vermeiden. Wenn ich stattdessen die auskommentierten Zeilen verwende, beschwert es sich.

playground

/* @flow */ 

import * as React from "react"; 

type ConfObj = { label: string }; 
type Conf = React.Node | ConfObj; 
type MyComponentProp = { 
    confs: Array<Conf>, 
} 

export default function MyComponent({ 
    confs = [], 
}: MyComponentProp) { 
    const items = confs.map((item, idx) => { 
    if (React.isValidElement(item)) { 
     // return React.cloneElement(item, { 
     return React.cloneElement(((item: any): React.Element<*>), { 
     key: idx.toString(), 
     }); 
    } 

    const item2 = ((item: any): ConfObj); 
    return <span>{item2.label}</span>; 
    // return <span>{item.label}</span>; 
    }); 

    return <div>items</div> 
} 

Gibt es einen besseren Weg, dies zu tun, das Gießen zu vermeiden. Gibt es eine bessere Möglichkeit, isValidElement zu schreiben, so kann der Flow den Typ ableiten, sobald die if-Bedingung übereinstimmt. Zum Beispiel, wenn es ein gültiges react-Element ist, warum muss ich es umwandeln? oder wenn nicht, warum Zugriff auf label gibt Fehler?

Answer 1

Ein item ist vom Typ Conf (die Node | ConfObj ist) Wenn Sie die if Anweisung eingeben, flow nicht sicher weiß, dass item eine gültige Element<*> (dies wird durch flow bekannt sein könnte ich tho denken), so dass Sie muss es explizit tippen.

Die <span>{item.label}</span> hat das gleiche Problem. Sie müssen es auch explizit auf ConfObj typisieren, da ein Node kein label Attribut hat.