reactjs - TypeScript: Tarkoittelitko kutsua tätä lauseketta?

Minulla on React-komponentti, joka vaatii string-tyyppisen propin. Minulla on myös funktio, joka palauttaa string-tyypin, sen tyyppi on (value: any): string.

Kun yritän siirtää sen komponentilleni <Component stringProp={myFunction("value")} />, saan virheen:

Type '(value: any) => string' is not assignable to type 'string'.ts(2322)

Miten minun pitäisi kirjoittaa tyyppi myFunction -funktiolle tai käyttää funktiota propissa? En halua kutsua sitä komponentin ulkopuolella, jos mahdollista.

Vastaus #1

Ehdotan, että käytät interface näin, koska tällä tavalla voit käsitellä propiasi ja voit välittää sille funktion tai merkkijonon :

interface Props {
 YOUR_PROP_NAME : (value? : any) => string | string
};

ja käytä sitä komponentissasi

const App : React.FC<Props> = (props) => {
    return (
        <>
            {typeof props.YOUR_PROP_NAME  === "string" ? <div>{props.YOUR_PROP_NAME}</div> :  <div>{props.YOUR_PROP_NAME()}</div>}
        </>
    );
};

export default App;

Vastaus #2

Minusta näyttää siltä, että ongelmasi on seuraava. Olet määrittänyt, että komponenttisi hyväksyy string-tyypin propina, mutta annat sille funktion. Sinun täytyisi päivittää props-rajapinta niin, että se ei odota merkkijonoa, vaan funktiota, joka palauttaa merkkijonon. Se näyttäisi jotakuinkin tältä.

interface Props {
    getString: (value: any) => string;
}

Nyt komponenttisi ei odota merkkijonoa, vaan funktiota, joka vastaa tyyppiä, jonka annat siihen.