将 onClick function 作为道具发送到带有 Typescript 的 React 组件

Question

I'm new to Typescript and I have to write a parent component that sends as props onClick to the child component where is a button that triggers the functionality of onClick when clicked.

Here is the code:

export function ParentComponent(props: ParentComponentProps) { 
  const [isOpened, toggleModal] = useToggle(false);
 // useToggle is a custom hook that toggles a boolean
  ...
  const onClick = () => {
    toggleModal();
  }

  return (
          <ChildComponent onClick={onClick} />
         );
}

For the child component I don't know how to define the interface, what should be put here?

export interface ChildComponentProps {
   onClick: <unknown>();  // what to add here?
}

And here is the child component:

export function ChildComponent({onClick}: ChildComponentProps) {
   ...
   return ( 
            <div>
            ...
               <ButtonComponent 
                  onClick={() => onClick()}
                  ...
               />
            ...
           );
}

Any ideas what to add to the interface or if there should be any other changes to be Typescript correct?

Answer 1

For functions like onClick, you have to describe input arugments and output or just write Function (although for better type checking you shouldn't just write Function).

So something like this:

onClick: () => void

If for example your function gets a number and returns a string, you should write it like this:

onClick: (n: number) => string

Answer 2

Parent Component:

interface OnClickIdInterface {
    (): void,
}

export interface parentPropsInterface {
    onClick?: OnGetIdInterface;
}
 
render() {
    return <ChildComponent onClick={(id) => this.onClick(id)}/>
 }

Child Component:

const HomePresentation: React.FunctionComponent<parentPropsInterface> = ({onClick}) => {
    return (
        <div onClick={()=>onClick()}>
           some content
        </div>
    )
}

Answer 3

Following code should work. But it depends on ButtonComponent . Used React.MouseEventHandler<T = Element> as type.

export interface ChildComponentProps {
   onClick: React.MouseEventHandler<ButtonComponent>
}

export function ChildComponent({onClick}: ChildComponentProps) {
   ...
   return ( 
            <div>
            ...
               <ButtonComponent 
                  onClick={() => onClick()}
                  ...
               />
            ...
           );
}

Please notify me if this is incorrect.