问为用PropTypes编写的React组件生成TypeScript

EN

一个完美的问题！我自己也在调查这个问题。

首先，我同意TypeScript不是PropTypes 100%的替代品，因为：

1. 如果您正在构建一个库，并且它是由一个普通的JavaScript项目使用的，那么输入无法帮助检测所有的问题。
2. PropTypes在运行时动态工作，而TypeScript检查只能静态运行。
3. PropTypes可用于在运行时获取有关组件的信息，而类型定义则在运行时丢失。

我的搜索向我展示了以下可能性：

• babel-plugin-babel to-proptypes

它允许在PropTypes编译期间实际生成TypeScript。它作为巴贝尔的插件。缺点是您必须使用Babel才能使用此功能。事实上，我发布了一个问题：不用Babel的插件？，但我怀疑这是否可能。

• 道具型

正如我从文档中看到的，这不是一个完全兼容的PropTypes生成器，而是一个替代器，它使用自己的实现在运行时进行类型检查。不过，我希望我的PropTypes与官方实现完全兼容。

您必须选择哪些是您可以接受的，以及您的项目的需求是什么。如果你对使用Babel很满意，我会推荐第一种选择。但是，如果您只需要确保类型检查在运行时有效，那么第二种方法可能是可行的。

至于我，我认为我现在必须同时保持TypeScript类型和手动PropTypes的同步，因为我不使用Babel，我不太喜欢定制的PropTypes实现。

也许，在阳光明媚的一天，我们会找到一些资源，在我们的公司编写自己的PropTypes生成器，并与每个人分享。

下面是一个可以用来保持PropTypes与类型同步的输入技巧：

import * as PropTypes from 'prop-types';
import React, {PureComponent} from 'react';


export interface IconProps {
  name: string;
}

export class Icon extends PureComponent<IconProps> {

  static propTypes: { [key in keyof IconProps]: any } = {
    name: PropTypes.string
  };

  render() {
    return <i className="dc-icon">{this.props.name}</i>;
  }

}

这将迫使propTypes对象具有与支持接口完全相同的属性。