在开发 React 应用时，我们经常需要查看组件的类型及其参数的类型。而通过使用 @uber-web-ui/extract-react-types-loader 这个 npm 包，可以方便的从 React 组件代码中提取注释中的类型定义，并将其类型定义导出到一个单独的文件中。
安装
安装 @uber-web-ui/extract-react-types-loader 可以通过 npm 安装：
npm install @uber-web-ui/extract-react-types-loader --save-dev
使用
@uber-web-ui/extract-react-types-loader 适用于使用 Webpack 构建应用程序的情况下。使用这个 loader 要在 Webpack 配置文件中配置。
配置 Webpack
在 Webpack 配置文件中添加如下代码：
module: {
rules: [{
test: /\.(js|jsx)$/,
loader: 'awesome-typescript-loader'
}, {
test: /\.(js|jsx)$/,
loader: '@uber-web-ui/extract-react-types-loader',
options: {
outputPath: './extracted-types.json'
}
}]
}在上面的代码片段中，我们同时应用了 awesome-typescript-loader 和 @uber-web-ui/extract-react-types-loader，这意味着我们的项目代码将首先被 TypeScript 编译，然后传递给 @uber-web-ui/extract-react-types-loader。
配置注释
在您的 React 组件代码中的注释中添加类型定义。通过指定 @props 和 @typedef 来定义 props 和其他类型：
/**
* @typedef {object} PropsType
* @property {string} name
* @property {number} age
*/
/**
* This is a simple component that returns user information.
*
* @component
* @props {PropsType} props
* @returns {JSX.Element}
*/在上面的示例中，我们定义了一个 PropsType 对象，其中包含两个必填属性：name 和 age。我们随后将此类型定义传递给组件的 props 属性。
生成类型文件
运行 Webpack，并可以看到在 outputPath 指定的位置生成了一个 extracted-types.json 文件。打开此文件，可以看到收集到的类型定义，如下所示：
{
"MyComponent": {
"props": {
"age": {
"type": "number",
"description": ""
},
"name": {
"type": "string",
"description": ""
}
}
}
}可以看到在此文件中，MyComponent 随后包含 props 对象，该对象包含了我们在之前注释中定义的类型。
示例代码
import React from 'react';
/**
* @typedef {object} PropsType
* @property {string} name
* @property {number} age
*/
/**
* This is a simple component that returns user information.
*
* @component
* @props {PropsType} props
* @returns {JSX.Element}
*/
const MyComponent = ({ name, age }) => (
<div>
<h1>Name: {name}</h1>
<p>Age: {age}</p>
</div>
);
export default MyComponent;在上面的示例中，我们定义了一个名为 MyComponent 的组件，并为其添加了一个名为 PropsType 的类型定义。此后，我们将类型定义和注释添加到组件的定义中。随后在 Webpack 编译时，我们根据 Webpack 配置文件中的配置文件生成了一个 JSON 文件，其中包含收集到的组件和其类型定义。
这个功能可以让我们避免前端组件类型定义较多时还要手写文档等，详细且有深度和学习以及指导意义，让开发 React 应用更加快捷高效。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673ddfb81d47349e53b68