如何键入异步 function 作为道具传递给 React 组件

Question

我应该如何键入作为属性传递给我的 React 组件的异步 function？

我的组件定义如下。 具体来说，我不知道如何在我的界面中键入addTask属性：

interface INewTaskEntryProps {
    addTask:any; // this 
}
class NewTaskEntry extends React.Component<INewTaskEntryProps> {
    ...
    render() { 
        return (
            ...
            <button onClick={(e) => this.props.addTask(e)}>Do Something</button>
            ...
        );
    }
}

我的异步 function 定义如下：

const addTask = async (e) => {
    ...
    try {
        const newID = await mongoTaskCollection.insertOne({
            ...
        });
    }
    ...
}

最后，我将异步 function 传递到我的组件中，如下所示：

<NewTaskEntry addTask={addTask} />

Answer 1

取决于 addTask 返回的内容，但可能是这样的：

interface INewTaskEntryProps {
  addTask: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void; 
}

在这种情况下，您告诉addTask返回 void。