Reactjs 让Storybook react docgen typescript loader使用typescript道具

我试图使用

react docgen typescript loader

在故事书中用我的typescript道具生成道具文档，但它没有将任何内容填充到

with info

加载项中

我使用的是createreact应用程序的TypeScript风格，我遵循多种不同的方法来配置

.storybook/webpack.config.js

，但似乎没有任何效果

以下是我当前的配置：

.storybook/webpack.config.js .storybook/config.ts 故事/button.stories.tsx

import*as React from'React'；
从'@storybook/react'导入{storiesOf}；
从“@storybook/addon info”导入{withInfo}；
从“../src/components/Button”导入按钮；
storiesOf（'按钮'，模块）
.addDecorator（withInfo）
.add（'continue'，（）=>Hello按钮，{info:{inline:true}}）
.add（'back'，（）=>Hello按钮，{info:{inline:true}}）；

src/components/Button.tsx

从“React”导入React；
界面道具{
buttonType:Button.Type；
}
常量按钮：React.FunctionComponent=（道具）=>{
const getStyles=（buttonType:string）：{color:string}=>{
如果（按钮类型==='reset'）{
返回{color:'red'}；
}
如果（buttonType==='submit'）{
返回{color:'green'}；
}
返回{color:'green'}；
};
const{buttonType，children}=道具；
返回{children}；
};
导出默认按钮；

此配置目前没有问题，但我仅将其视为Storybook中的信息输出：

---

使用命名导入有一些不同，这对我来说很有效：

import React，{FC}来自“React”

---

const按钮：FC=（道具）=>{

作为一个维护大型typescript/react故事书react docgen typescript的人，react docgen typescript不幸地使编译速度非常慢，因此我建议您只需手工编写道具文档，这也允许您编写描述等。@ShanonJackson我担心我必须这样做。谢谢这是为了洞察！没问题，我知道手工做事情听起来很痛苦（因为我们是程序员，我们喜欢自动化事情）但它真的没有那么糟糕，也不值得交易，比如编译速度慢了50倍。你可以使用jsdoc注释格式为道具添加说明。查看代码和输出OMG这是我的问题。现在我可以将其指定为增强功能。你能详细解释一下从FunctionComponent到FC的更改吗？

module.exports = ({ config, mode }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          presets: [['react-app', { flow: false, typescript: true }]],
        }
      },
      require.resolve("react-docgen-typescript-loader"),
    ]
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

import { configure } from '@storybook/react';
// automatically import all files ending in *.stories.js
const req = require.context('../', true, /.stories.tsx$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);

import * as React from 'react';

import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import Button from '../src/components/Button';

storiesOf('Button', module)
    .addDecorator(withInfo)
    .add('continue', () => <Button buttonType="submit">Hello Button</Button>, { info: { inline: true } })
    .add('back', () => <Button buttonType="reset">Hello Button</Button>, { info: { inline: true } });

import React from 'react';

interface Props {
    buttonType: Button.Type;
}

const Button: React.FunctionComponent<Props> = (props) => {
    const getStyles = (buttonType: string): {color: string} => {
        if (buttonType === 'reset') {
            return { color: 'red' };
        }
        if (buttonType === 'submit') {
            return { color: 'green' };
        }
        return { color: 'green' };
    };

    const { buttonType, children } = props;

    return <button type={buttonType} style={getStyles(buttonType)}>{children}</button>;
};

export default Button;