Storybook Story From Example 是什么类型

Question

我使用了故事书网站上示例中的一些代码，具体来说：

export const Primary = Primary.decorators = [(Story) => <div style={{ margin: '3em' }}><Story/></div>]

然而，即使这是 typescript 示例，它也没有为 Story 指定类型，除非它有类型，否则我的 linter 不会通过。我应该为故事使用什么类型？

Story: any

也不及格

参考：https://storybook.js.org/docs/react/writing-stories/decorators

Answer 1

根据我们的使用方式，您可以从 Story 中判断出我们需要什么样的属性。我们期望它是可以通过 JSX 调用的东西，没有参数和 return 一个元素。因此，您可以使用 (Story: React.FC)，这样就可以了。

如 this example 所示，您可以从 @storybook/react 导入类型 Meta 并将其用作 Primary 的类型。

import { Meta } from "@storybook/react";

const Primary: Meta = {
  title: "MyStory",
  decorators: [
    (Story) => (
      <div style={{ margin: "3em" }}>
        <Story />
      </div>
    )
  ]
};

他们在这里输入 Story 被推断为 () => StoryFnReactReturnType。

您还可以导入 Story 的类型：

import { Story } from "@storybook/react";

export default {
  title: "MyStory",
  decorators: [
    (Story: Story) => (
      <div style={{ margin: "3em" }}>
        <Story />
      </div>
    )
  ]
};

Storybook Story From Example 是什么类型

What Type is Storybook Story From Example

javascript

typescript

storybook