Typescript 中的“boolean”类型不可分配给“StoryFnReactReturnType”类型的 React Storybook

Question

我正在尝试在打字稿中获得一个与 Storybook 一起使用的简单按钮组件。我正在关注文档和此示例。

\n

我的组件和故事如下：

\n

组件/Button.tsx：

\n

import {FC} from \'react\';\n\nexport interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {\n    children: React.ReactNode;\n    variant: "primary" | "danger";\n    shape?: "rounded";\n}\n\nexport const Button: FC<ButtonProps> = ({\n    children,\n    variant,\n    shape,\n    ...props\n}) => {\n    const classNames = `btn btn-${variant} btn-${shape}`;\n    return (\n        <button className={classNames} {...props}>\n            {children}\n        </button>\n    );\n};\n

\n

故事/Button.stories.ts

\n

import { ComponentStory, ComponentMeta } from \'@storybook/react\';\n\nimport { Button, ButtonProps } from \'../components/Button\';\n\nexport default {\n    /*  The title prop is optional.\n    * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading\n    * to learn how to generate automatic titles\n    */\n    title: \'Button\',\n    component: Button,\n} as ComponentMeta<typeof Button>;\n\n// We create a \xe2\x80\x9ctemplate\xe2\x80\x9d of how args map to rendering\nconst Template: ComponentStory<typeof Button> = (args) => <Button { ...args } />;\n\nexport const Primary = Template.bind({});\n\nPrimary.args = {\n    primary: true,\n    label: \'Button\',\n};\n

\n

这行：

\n

const Template: ComponentStory<typeof Button> = (args) => <Button { ...args } />;\n

\n

抛出以下错误：

\n

Type \'boolean\' is not assignable to type \'StoryFnReactReturnType\' \n

\n

\n

我是否缺少某种配置？

\n

Answer 1

首先，您似乎需要将Button.stories.ts文件更改为.tsx，常规打字稿认为 <> 的内部应该是一种类型。之后，Primary.args将需要匹配您定义的 ButtonProps。