reactjs - Storybook react-docgen-typescript-loader'ın TypeScript özelliklerini kullanmasını sağlamak

TypeScript Props'larımı kullanarak Storybook'ta props belgelerimi oluşturmak için react-docgen-typescript-loader kullanmaya çalışıyorum, ancak withInfo eklentisine hiçbir şey doldurmuyor.

TypeScript versiyonunu kullanarak create-react-app oluşturuyorum ve .storybook/webpack.config.js dosyasını yapılandırmanın birden fazla farklı yöntemini takip ediyorum ama hiçbir şey işe yaramıyor.

İşte mevcut yapılandırmam:

.storybook/webpack.config.js

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;
};

.storybook/config.ts

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);

hikayeler/düğme.stories.tsx

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 } });

src/bileşenler/Düğme.tsx

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;

Bu yapılandırmayla şu anda herhangi bir sorun yok, ancak Storybook'ta yalnızca bunu bilgi çıktısı olarak görüyorum:

Cevap #1

İsimlendirilmiş ithalatları kullanmada bazı farklar var, bu benim için işe yaradı:

import React, {FC} from 'react' ...