简介
Sarathi 是一个帮助你编写更好的 React 组件的 npm 包。它提供了类似于 prop 声明式的方式去声明组件的属性类型，并支持在组件内部自动生成文档。Sarathi 还为 React Hooks 提供了更方便的方式去声明 Hook 输入输出的类型。
这篇文章将介绍如何使用 Sarathi。
安装
你可以通过 npm 安装 Sarathi：
--- ------- -------
使用
声明组件属性类型
在组件声明中使用 Sarathi 很简单，你只需要在组件声明上方使用 withPropTypes 高阶组件：
------ ----- ---- --------
------ - ------------- - ---- ----------
----- ----------- - -- ----- ---- ------- -- -- -
---- ------------------
-------------------
------------------
------
--
------ ------- ---------------
----- ----------------------------
---- ----------------------------
-------- --------------------------
----------------withPropTypes 的参数是一个对象，其中属性名为组件的属性名，属性值为这个属性的类型定义。 在上面的例子中，组件的 name 属性被定义为字符串类型，并且是必需的；age 属性被定义为数字类型，并且也是必需的；onClick 属性被定义为函数类型，并且也是必需的。
生成文档
Sarathi 还提供了用于生成组件文档的 API withDocumentation。它可以自动生成组件的属性表格，并在组件下方显示属性说明和示例代码。
------ ----- ---- --------
------ - -------------- ----------------- - ---- ----------
----- ----------- - -- ----- ---- ------- -- -- -
---- ------------------
-------------------
------------------
------
--
------ ------- ---------------------------------
----- ----------------------------
---- ----------------------------
-------- --------------------------
---------------- -
----- -----
---- -----
-------- -------
-- --- -----
------------
------------
--------
----------- -- -
---------------------
--
-----在这个例子中，我们在 withDocumentation 的第二个参数中，提供了组件属性的汉语说明，以及使用示例代码。这些信息将自动呈现在组件文档中。
声明 Hook 输入输出类型
使用 Sarathi 的另一个功能是更方便的声明 Hook 输入输出类型。我们可以使用 flow 和 Sarathi 提供的 hook 和 returns API 来声明 Hook 的输入输出类型。
------ ------ - -------- - ---- --------
------ - ----- ----- ------- - ---- ----------
---- ---------------- - -
-------------- -------
-
---- ----------------- - -
------ -------
---------- -- -- -----
---------- -- -- -----
-
----- ---------- - -----
-------- ------------ - - -- ----------------- -- -
----- ------- --------- - -----------------------
----- --------- - -- -- -
-------------- - ---
--
----- --------- - -- -- -
-------------- - ---
--
---------
------
----------
----------
---
----
--
------ ------- -----------在这个例子中，我们使用 flow 和 Sarathi 提供的 hook 和 returns API 来声明 useCounter Hook 的输入输出类型。
Hook 的输入类型被声明为 UseCounterInputs 类型，并且包含一个可选的 initialCount 属性。 Hook 的输出类型被声明为 UseCounterReturns 类型，并且包含 count，increment 和 decrement 三个属性。
总结
通过使用 Sarathi，我们可以更方便地声明组件和 Hook 的输入输出类型，并且自动生成文档和示例代码，这能够让我们更加高效和安全地编写代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055d8881e8991b448db490