javascript - IntelliSense 不适用于我自己的 React 组件库

Question

IntelliSense 不显示我的 React 库中的组件接受的属性。该库通过 Webpack 捆绑到 UMD 模块中(如果重要的话)。

当我尝试查看组件需要哪些 props 时，它在我的 IDE 中看起来如下:

与其他元素/组件相比...

如何让 IntelliSense 与我的组件配合使用？

Answer 1

聚会迟到了，但希望这会对某人有所帮助。

我使用 rollup 构建的组件库也遇到了同样的问题。

我使用@babel/plugin-proposal-class-properties，并编写如下类:

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

export default class Alert extends PureComponent {
    static propTypes = {
        type: PropTypes.oneOf(['success', 'info', 'warning', 'danger']),
        title: PropTypes.string,
    }

    render() {
        const { type, children } = this.props


        return (
            <div>
                <h3>{title}</h3>
                {children &&
                <div className="alert-content">
                    {children}
                </div>
                }
            </div>
        )
    }
}

在我编译的文件中，它使用 defineProperty 来定义 propTypes:

_defineProperty(Alert, "propTypes", {
  type: PropTypes.oneOf(['success', 'info', 'warning', 'danger']),
  title: PropTypes.string
});

通过在 babel-plugin 上设置选项 loose: true，我设法将其变成这样，并且智能感知在 IntelliJ 中工作:

Alert.propTypes = {
  type: PropTypes.oneOf(['success', 'info', 'warning', 'danger']),
  title: PropTypes.string
};

我的.babelrc

{
  "plugins": [
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}