Storybook addon-docs in Typescript奇怪的行为

Question

我想在我的typescript react项目中使用storybook addon-docs。我几乎可以让它工作了，但是文件名似乎影响了渲染的道具类型表。

文件结构：

src
- Button
-- Button.tsx
- stories
-- Button.stories.tsx

这种方法是有效的，但是描述是通用的，比如：union而不是'small' | 'medium' | 'large'

但当我将其更改为：

src
- Button
-- Button.stories.tsx
- stories
-- Button.stories.tsx

它完全按照预期工作。非常奇怪。

我将在下面提供我的文件：

Button.tsx

import React, { FC, ReactNode } from "react";

type ButtonProps = {
  children: ReactNode;
  onClick?: () => void;
  size?: 'tiny' | 'small' | 'regular';
};

/**
 * The world's most _basic_ button
 */
export const Button: FC<ButtonProps> = (props: ButtonProps) => (
  <button onClick={props.onClick} type="button">
    {props.children}
  </button>
);

Button.stories.tsx

import { Button } from '../Button/Button.stories';
import React from 'react';
import { action } from '@storybook/addon-actions';

export default {
  title: 'Button',
  component: Button,
};

export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;

.storybook/main.js

module.exports = {
  stories: ["../src/**/*.stories.(ts|tsx|js|jsx|mdx)"],
  addons: [
    "@storybook/addon-actions",
    "@storybook/addon-links",
    "@storybook/preset-create-react-app",
    {
      name: "@storybook/addon-docs",
      options: {
        configureJSX: true,
      },
    },
  ],
};

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

package.json

{
  "name": "cra-ts",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "typescript": "^3.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@storybook/addon-actions": "^5.3.19",
    "@storybook/addon-docs": "^5.3.19",
    "@storybook/addon-info": "^5.3.19",
    "@storybook/addon-links": "^5.3.19",
    "@storybook/addons": "^5.3.19",
    "@storybook/preset-create-react-app": "^3.0.0",
    "@storybook/react": "^5.3.19",
    "react-docgen-typescript-loader": "^3.7.2",
    "ts-loader": "^7.0.5"
  }
}

任何帮助都将不胜感激！提前感谢！

Answer 1

import React, { FC, ReactNode } from "react";

export type ButtonProps = {
  children: ReactNode;
  onClick?: () => void;
  size?: 'tiny' | 'small' | 'regular';
};

/**
 * The world's most _basic_ button
 */
const Button: FC<ButtonProps> = (props: ButtonProps) => (
  <button onClick={props.onClick} type="button">
    {props.children}
  </button>
);

export default Button;

在新行上导出组件成功！