javascript - Storybook Story From Example 是什么类型

Question

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

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

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

Story: any

也不会通过。

引用:https://storybook.js.org/docs/react/writing-stories/decorators

Answer 1

您可以根据我们如何使用 Story 来判断我们需要哪些属性。我们期望它是可以通过 JSX 不带参数调用并返回一个元素的东西。所以你可以使用 (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>
    )
  ]
};