简介
Sarathi 是一个帮助你编写更好的 React 组件的 npm 包。它提供了类似于 prop 声明式的方式去声明组件的属性类型，并支持在组件内部自动生成文档。Sarathi 还为 React Hooks 提供了更方便的方式去声明 Hook 输入输出的类型。
这篇文章将介绍如何使用 Sarathi。
安装
你可以通过 npm 安装 Sarathi：
npm install 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