如何键入作为 prop 传递给 React 组件的异步函数答案

【问题标题】：How to type async function passed as prop to React component如何键入作为 prop 传递给 React 组件的异步函数
【发布时间】：2021-01-17 17:34:00
【问题描述】：

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

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

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

我的异步函数是这样定义的：

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

最后我将异步函数传递给我的组件，如下所示：

<NewTaskEntry addTask={addTask} />

【问题讨论】：

(e: EventType) => Promise<void>
在最新的 React 版本中，我知道它的 const addTask = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => ... 。不确定您的旧版本。
@SILENT 对于创建回调是正确的，但他试图独立于创建一个值来指定此类值的类型。

标签： reactjs typescript

【解决方案1】：

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

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

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

【讨论】：

我们知道addTask 返回Promise<T>，而void 最有可能是T，因为它是一个事件处理程序。我相信您的事件类型是正确的
完美！我也应该意识到这就是答案——我的浏览器中的 Typescript 错误确实有这个确切的建议。 :)