reactjs - TypeScript: Apakah Anda bermaksud memanggil ekspresi ini?

Saya memiliki komponen React yang memerlukan prop dengan tipe string. Saya juga memiliki fungsi yang mengembalikan string, itu memiliki tipe (value: any): string.

Ketika saya mencoba meneruskannya ke komponen saya <Component stringProp={myFunction("value")} /> saya mendapatkan error:

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

Bagaimana seharusnya saya menulis tipe untuk myFunction atau menggunakan fungsi tersebut dalam prop? Saya tidak ingin memanggilnya di luar komponen jika memungkinkan.

Jawaban #1

Saya sarankan Anda menggunakan interface seperti ini karena dengan cara ini Anda bisa menangani prop Anda dan Anda bisa memberinya fungsi atau string :

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

dan gunakan itu di komponen Anda

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;

Jawaban #2

Sepertinya masalah Anda adalah sebagai berikut. Anda telah menentukan bahwa komponen Anda menerima string sebagai prop, tetapi Anda memberinya sebuah fungsi. Anda perlu memperbarui antarmuka props agar tidak mengharapkan string, melainkan sebuah fungsi yang mengembalikan string. Itu akan terlihat seperti ini.

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

Sekarang komponen Anda tidak mengharapkan sebuah string, tetapi sebuah fungsi yang sesuai dengan tipe yang Anda berikan.

Artikel terkait