{handleButton}：{handleButton：（）=> void}在示例中是什么意思

Question

我想知道{handleButton}：{handleButton：（）=> void}的含义在函数的参数内部。是打字稿语法，es6语法还是其他？

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

Answer 1

语法是打字稿。

冒号左侧的语法是对象解构，以访问传入参数的handleButton属性。 因此，必须使用包含此属性的对象来调用按钮函数。例如：

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

冒号的右侧是左侧的类型。这里的handleButton属性被声明为不带任何内容且不返回任何内容的函数。