从 TypeScript 生成 PropTypes答案

【问题标题】：Generate PropTypes from TypeScript从 TypeScript 生成 PropTypes
【发布时间】：2020-02-21 18:36:27
【问题描述】：

我正在使用带有 TypeScript 的 React。我也在使用 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 中定义不同的属性），我都会收到 typescript 错误。有时我真的不知道如何定义 PropType。例如，当从“历史”传递历史属性时。我不想自己定义 History PropType，因为它的形状很复杂。我看到有项目从 PropTypes 生成 TypeScript 但我真的不喜欢它，因为 TypeScript 更强大，我可以定义更详细的类型。我正在寻找一种从 TypeScript 生成 PropTypes 的方法，我认为这是 React 开发人员必须具备的功能。

【问题讨论】：

为什么不直接省略 proptypes？打字稿使它过时了..
你不需要 proptypes，如果你缺少任何需要的 props，Typescript 会提示你（通过编辑器和编译器命令行）
@MuratKaragöz 最终你运行了代码，在现实世界中事情是出乎意料的，即使我有 TypeScript，一个组件也会得到类型不正确的 prop。请记住，应用程序通常与 apis 一起使用，并且没有一个系统（我不知道）可以强制执行与类型的合同。所以我所有的 api 响应都以“任何”类型开头，我强制响应是某种东西。另一种可能性是应用程序的一部分还没有类型。
我认为您的 API 调用应该映射到模型。如果映射失败，那么您将进行运行时检查。以及使用 api 时的合约系统grpc.io :)
@MichałK。我不想发明一个新系统来替代已经发明的系统。我想使用内置的 proptypes 但我不想重复这些类型。

标签： javascript reactjs typescript react-proptypes

【解决方案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,
};

【讨论】：

这该怎么办？对我来说，如果我在 npm start 命令之后将其添加到我的项目中，则根本没有任何变化。？有什么神奇的命令可以生成propTypes？文档中没有解释。我有：``` import React from 'react';接口道具 { 计数器：数字； } const Heading: React.FC = (props: Props) => { return
This is counter {props.counter}
; };导出默认标题； ```

This is counter {props.counter}