如何在 TypeScript 中将函数类型声明为参数

Question

我在 React 中有一个 setState 函数，我想将其作为参数传递给另一个函数。我想知道如何在不使用“any”作为类型的情况下在 TypeScript 中定义它：

目前看起来是这样的：

export const keyDownHandler = (event: React.KeyboardEvent, buttonDate: number, setShowCalendar: any): void => {
// stuff happening
setShowCalendar(false)
}

Answer 1

您可以像这样使用类型定义。

setShowCalendar: React.Dispatch<React.SetStateAction<boolean>>

Answer 2

我认为最简单的解决方案是 (b: boolean) => void，但如果您想要完整类型，可以使用 React.Dispatch<React.SetStateAction<boolean>>。

Answer 3

来自 useState 的 React 状态 setter 的类型是 React.Dispatch<React.SetStateAction<stateType>>。在您的情况下，状态类型看起来是 boolean，因此：

export const keyDownHandler = (event: React.KeyboardEvent, buttonDate: number, setShowCalendar: React.Dispatch<React.SetStateAction<boolean>>): void => {
    // stuff happening
    setShowCalendar(false);
};

你可以在index.d.ts中看到这个@types/react，或者在一个体面的IDE（例如VSCode），你可以通过将鼠标悬停在上面看到它状态 setter:

在 VSCode 中，将鼠标悬停在 setShowCalendar 上会显示此弹出窗口：

const setShowCalendar: React.Dispatch<React.SetStateAction<boolean>>

Answer 4

您可以为此使用函数类型。例如，一个接受布尔值且 returns 什么都没有的函数会是这样的：

const setShowCalendar = (value: boolean) => {
   ... 
   logic
   ...
}

setShowCalendar 的类型将是 let setShowCalendar: (value: boolean) => void; 除了缺少正文之外，该类型看起来几乎与函数本身相似。

查找您正在使用的类型并在上面的示例类型声明中替换它。

您可以在此处阅读更多相关信息：https://www.typescriptlang.org/docs/handbook/functions.html#function-types

如何在 TypeScript 中将函数类型声明为参数

How to declare a function type as a parameter in TypeScript

javascript

syntax

typescript

reactjs