在 typescript 中定义功能组件的状态接口

Posted 2023-03-13

【中文标题】在 typescript 中定义功能组件的状态接口

【英文标题】：Define state interface of functional component in typescript

【发布时间】：2019-10-06 11:44:14

【问题描述】：

有了钩子，功能性的 React 组件不再是一个无状态的组件。它可以有状态，因此为功能组件定义状态接口是有意义的。

虽然 typescript 不会对此抛出任何错误/警告，但最好定义它。

在做同样的事情时需要帮助。

【问题讨论】：

使用钩子时可以指定状态形状。您能否添加一个您正在寻找的具体示例？

【参考方案1】：

当您使用钩子时，状态不会存储在组件中，而是存储在组件上下文中的某个位置，并且可以在组件中访问该上下文。当您查看 useState 钩子的签名时，它会说：

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

这意味着您的状态是从其初始值推断出来的。如果你想变得超级显式，你可以将泛型传递给该函数：

const [s, setS] = useState<stateShape: StateShape>();

但正如我所说.. 组件仍然是无状态的，因为状态没有存储在组件中。