在 Redux 应用中，我们经常会使用 connect 函数将组件与 Redux 中的状态和操作关联起来。但是，由于这种关联方式的动态性，导致在组件使用时的类型验证变得相当困难。redux-connected-proptypes 是一个可以帮助我们进行类型验证的 npm 包，它可以让静态类型检查工具（如 TypeScript）在编译时发现错误，从而提高代码质量和开发效率。
安装
通过 npm 安装 redux-connected-proptypes：
npm install redux-connected-proptypes
或者，如果您使用 Yarn，可以运行以下命令：
yarn add redux-connected-proptypes
用法
在使用 redux-connected-proptypes 之前，您需要确保已使用 react-redux 的 connect 函数将组件与 Redux 状态和操作连接起来。然后，可以通过以下方式使用该包：
-- -------------------- ---- ------- ------ - ------------------ - ---- --------------------------- -- ---- --------- --------------------- - - -- ----- --------- --------- ----------------------------------- -------- ---------------------------------- - -- - --------------- -- ----- - ------------------ -- ------- - --------- ---- ------ ------- ------------------------ --------------------------------
在上面的示例中，我们使用 connectedPropTypes 来定义 myAction 和 myState 的类型，这两个属性是通过 connect 函数传递给 MyComponent 的。connectedPropTypes 将使用遍历整个应用程序状态树和操作的信息，然后创建一个返回验证类型函数的函数。如果 React 组件使用的 prop 与 connect 函数中定义的 prop 类型不匹配，则 TypeScript 将抛出警告。
在使用 connectedPropTypes 时，需要注意以下几点：
- 您必须使用
connect函数将组件连接到 Redux 状态和操作。 - 您必须在组件中使用
propTypes，并将验证类型设置为connectedPropTypes，以便正确验证与connect函数传递的属性类型匹配的组件 prop 类型。 - 您必须使用连接了
connectedPropTypes的组件，在编写代码时使用严格措辞的类型，否则 TypeScript 将无法提供足够信息，无法发现错误。例如：
interface Props {
myAction?: connectedPropTypes.BinaryFunction,
myState?: connectedPropTypes.Boolean
}在该示例中，
connectedPropTypes提供了BinaryFunction和Boolean类型，用于代替Function和Boolean，以自动检测 state 和操作函数。
示例代码
以下是使用 redux-connected-proptypes 的完整示例代码，包括 connect 函数、connectedPropTypes 和组件 propTypes 的使用：
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ - ------- - ---- --------------
------ - --------- -------- - ---- ------------
------ - --------- - ---- ----------
------ - ------------------ - ---- ----------------------------
--------- ----- -
-- -- ------------------ -- --------
---------- ----------------------------------
-- -- ------------------ -- -------
--------- ---------------------------
-
----- ----------- ------- ---------------------- --- -
-------- -
------ -
-----
---
------
-
-
-
--------------------- - -
--------- -----------------------------------
-------- ----------------------------------
-
----- --------------- - ------- ---------- -- --
-------- -------------
--
----- ------------------ - ---------- ------------------- -- --
--------- -- -- --------------------
--
------ ------- ------------------------ --------------------------------在上面的示例代码中，我们使用了 connectedPropTypes 来定义 myAction 和 myState 的类型，这两个属性是通过 connect 函数传递给 MyComponent 的。最后，我们将 MyComponent 导出，并与 Redux 状态绑定，以便其他模块可以使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066ffee361a36e0bce8a59