从 TypeScript 生成 PropTypes

Question

我正在使用 React 和 TypeScript。我也在使用 PropTypes。 TypeScript 用于编译时类型检查，而 PropTypes 在运行时间（开发模式）验证传递的道具。所以我发现自己写了两次类型。 TypeScript 和 PropTypes。例如，组件 ListingsList:

interface ListingsListProps {
    listings: Listing[];
    height: number;
    width: number;
    rowHeight: number;
    forwardedRef?: Ref<List>;
    className?: string;
}

const ListingsList: FunctionComponent<ListingsListProps> = props => {
...
...
};

ListingsList.propTypes = {
    listings: PropTypes.arrayOf(listingPropType.isRequired).isRequired,
    height: PropTypes.number.isRequired,
    width: PropTypes.number.isRequired,
    rowHeight: PropTypes.number.isRequired,
    forwardedRef: PropTypes.shape({ current: PropTypes.instanceOf(List).isRequired }),
    className: PropTypes.string,
};

每次我犯错（在 PropTypes 和 TypeScript 中以不同方式定义属性），我都会收到打字稿错误。有时我真的不知道如何定义 PropType。例如，从 'history' 传递历史记录属性时。我不想自己定义 History PropType，因为它的形状很复杂。我看到有项目从 PropTypes 生成 TypeScript 但我真的不喜欢它，因为 TypeScript 更强大，我可以定义更详细的类型。我正在寻找一种从 TypeScript 生成 PropTypes 的方法，我认为这是 React 开发人员必须具备的功能。

Answer 1

您可以使用 babel-plugin-typescript-to-proptypes。它需要 @babel/plugin-syntax-jsx 插件或 @babel/preset-react 预设。

使用npm install --save-dev babel-plugin-typescript-to-proptypes安装。

这是一个示例 babel.config.js:

const plugins = [];

if (process.env.NODE_ENV !== 'production') {
  plugins.push('babel-plugin-typescript-to-proptypes');
}

module.exports = {
  // Required
  presets: ['@babel/preset-typescript', '@babel/preset-react']
  plugins,
};

从 TypeScript 生成 PropTypes

Generate PropTypes from TypeScript

javascript

typescript

reactjs

react-proptypes