在开发 React 应用时，我们经常需要查看组件的类型及其参数的类型。而通过使用 @uber-web-ui/extract-react-types-loader 这个 npm 包，可以方便的从 React 组件代码中提取注释中的类型定义，并将其类型定义导出到一个单独的文件中。
安装
安装 @uber-web-ui/extract-react-types-loader 可以通过 npm 安装：
--- ------- --------------------------------------- ----------
使用
@uber-web-ui/extract-react-types-loader 适用于使用 Webpack 构建应用程序的情况下。使用这个 loader 要在 Webpack 配置文件中配置。
配置 Webpack
在 Webpack 配置文件中添加如下代码：
------- -
------ --
----- --------------
------- ---------------------------
-- -
----- --------------
------- ------------------------------------------
-------- -
----------- ------------------------
-
--
-在上面的代码片段中，我们同时应用了 awesome-typescript-loader 和 @uber-web-ui/extract-react-types-loader，这意味着我们的项目代码将首先被 TypeScript 编译，然后传递给 @uber-web-ui/extract-react-types-loader。
配置注释
在您的 React 组件代码中的注释中添加类型定义。通过指定 @props 和 @typedef 来定义 props 和其他类型：
--- - -------- -------- --------- - --------- -------- ---- - --------- -------- --- -- --- - ---- -- - ------ --------- ---- ------- ---- ------------ - - ---------- - ------ ----------- ----- - -------- ------------- --
在上面的示例中，我们定义了一个 PropsType 对象，其中包含两个必填属性：name 和 age。我们随后将此类型定义传递给组件的 props 属性。
生成类型文件
运行 Webpack，并可以看到在 outputPath 指定的位置生成了一个 extracted-types.json 文件。打开此文件，可以看到收集到的类型定义，如下所示：
-
-------------- -
-------- -
------ -
------- ---------
-------------- --
--
------- -
------- ---------
-------------- --
-
-
-
-可以看到在此文件中，MyComponent 随后包含 props 对象，该对象包含了我们在之前注释中定义的类型。
示例代码
------ ----- ---- --------
---
- -------- -------- ---------
- --------- -------- ----
- --------- -------- ---
--
---
- ---- -- - ------ --------- ---- ------- ---- ------------
-
- ----------
- ------ ----------- -----
- -------- -------------
--
----- ----------- - -- ----- --- -- -- -
-----
--------- -----------
------- ---------
------
--
------ ------- ------------在上面的示例中，我们定义了一个名为 MyComponent 的组件，并为其添加了一个名为 PropsType 的类型定义。此后，我们将类型定义和注释添加到组件的定义中。随后在 Webpack 编译时，我们根据 Webpack 配置文件中的配置文件生成了一个 JSON 文件，其中包含收集到的组件和其类型定义。
这个功能可以让我们避免前端组件类型定义较多时还要手写文档等，详细且有深度和学习以及指导意义，让开发 React 应用更加快捷高效。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600673ddfb81d47349e53b68