javascript - วิธีส่งฟังก์ชันเป็น prop ใน react typescript

ฉันกำลังเรียนรู้ TypeScript กับ React และฉันเจอปัญหา ฉันพยายามส่งฟังก์ชันเป็น prop จากคอมโพเนนต์ App ของฉันไปยังคอมโพเนนต์ลูกที่ชื่อ DataForm

แต่ฉันได้รับข้อผิดพลาด:

ประเภท '(f: any) => any' ไม่สามารถกำหนดค่าให้กับประเภท '() => void' ได้
พารามิเตอร์ 'f' มีประเภท 'any' โดยปริยาย

และนี่คือโค้ดของฉัน

แอพ.tsx

import React from 'react';
import './App.css';
import DataForm from './components/form';

export const Data = {
  name: "",
  country: "",
  age:"",
  adress:""
}

function App() {


  const generateCard = ()=>{
    console.log(" generateCard runned")
  }
  return (
    <>
      <h1>Human Card Generator</h1>
      <DataForm  createCard = { generateCard }/>
    </>
    

  );
}

export default App;

components/form.tsx

import React from 'react'
import { Data } from '../App'
import 'bootstrap';

interface dataFormProps{
    createCard: ()=>void
}

export default function DataForm({ createCard = f => f }: dataFormProps){

    const dataProceed = (e: any) =>{
        Data.name = (document.getElementById('name') as HTMLInputElement).value;
        Data.country = (document.getElementById('country') as HTMLInputElement).value;
        Data.age = (document.getElementById('age') as HTMLInputElement).value;
        Data.adress = (document.getElementById('adress') as HTMLInputElement).value;
        createCard();
    }


    return(
        <form onSubmit = { dataProceed }>
            <input type="text"   id = "name"  />
            <input type="text"  id = "country" />
            <input type="number" id="age" />
            <input type="text" id = "adress"/>
            <button type="submit">stwórz kartę</button>
        </form>
    )
}

คำตอบ #1

ปัญหาไม่ได้อยู่ที่การส่งฟังก์ชัน แต่เป็นเมื่อทำการแยกโครงสร้าง props และกำหนดฟังก์ชันเริ่มต้น:

{ createCard = f => f }: dataFormProps

โค้ดนี้ระบุว่า createCard ควรเป็นฟังก์ชันที่รับพารามิเตอร์และส่งค่ากลับ ซึ่งมันไม่ได้ทำเช่นนั้น:

createCard: ()=>void

ทำให้ค่าพารามิเตอร์เริ่มต้นตรงกับลายเซ็น:

{ createCard = () => {} }: dataFormProps

คำตอบ #2

ฟังก์ชันดีฟอลต์ createCard ควรมีชนิด () => void ดังนั้นให้ปรับปรุงแบบนี้:

DataForm({ createCard = () => {} }: dataFormProps)