What does {handleButton}: {handleButton:()=>void} mean in the example

Question

I am wondering what the part {handleButton}: {handleButton:()=>void} means inside the parameter of the function. Is it a typescript syntax, a es6 syntax or something else?

const button = ({ handleButton }: { handleButton: () => void }) => (
    <button onClick={handleButton}>
);

Answer 1

The syntax is typescript.

The syntax in the left part of the colon is object destructuring to access the handleButton property of the argument passed in. So the button function must be called with an object having containing this property. For example:

button({ a: 'hello', handleButton: () => console.log('hey') });

The right part of the colon is the type of what is on left side. Here the handleButton property is declared to be a function that takes nothing and returns nothing.