CSF3 中的打字稿支持答案

【问题标题】：Typescript support in CSF3CSF3 中的打字稿支持
【发布时间】：2022-08-24 17:24:56
【问题描述】：

我正在使用 CSF3 编写故事，并且我想正确注释我的故事。我用谷歌搜索过，基本上找不到答案。我尝试了一些技术here，但都没有奏效。我发现某物在故事书网站上关于Meta 和ComponentMeta 或ComponentStory 什么的，但我再也找不到了。

所以希望这里有人可以指出一个“简单”的可操作答案。

作为参考，这里有一些简单的故事，我尝试过不起作用的注释。

export default { component: DataPresentation } as Meta;

// The simplest version of DataPresentation can simply take DataTable\'s props plus a tableId
const Default: ComponentStory<typeof DataPresentation> = {
  args: {
    ...DataTableStories.Default.args,
    tableId: \"players\"
  },
};

const NoFiltering: ComponentStory<typeof DataPresentation> = {
  storyName: \'No search/filter args\',
  ...Default,
};

Default 在args 上有一个错误，这似乎与组件道具有关（并且可能是一个“有效”的 TS 错误，我的意思是我的类型关系有问题，而不是故事书的怪癖）
NoFiltering 本身存在错误（与其args 不同），我想这意味着我只是使用了错误的类型，而且我不知道自己在做什么正在做，这就是问这个问题的重点。

类型 \'{ 装饰器？：DecoratorFunction<ReactFramework, Args>[] |不明确的;参数？：参数|不明确的; args?: 部分<道具> |不明确的; ... 6 更多 ...;故事？：省略<...> |不明确的; }\' 没有为签名提供匹配项 \'(args: Props, context: StoryContext<ReactFramework, Props>): StoryFnReactReturnType\'。

标签： typescript storybook

【解决方案1】：

没有文档描述如何使用 CSF3，尤其是如何将其与 TypeScript 一起使用。

在对他们的源代码（故事书版本6.5.9）进行了一些调查之后，我发现他们有ComponentStoryObj 类型声明为 CSF3 格式

因此，要使您的代码示例正常工作，您需要将 ComponentStory 类型替换为 ComponentStoryObj 类型

const Default: ComponentStoryObj<typeof DataPresentation> = {
  // ...
};

const NoFiltering: ComponentStoryObj<typeof DataPresentation> = {
  // ...
};

这是我在他们的仓库中找到的示例之一 - example

【讨论】：

【解决方案2】：

如果有人仍在寻找 CSF 3 的打字稿，他们会在几个月前为此发布 blog post。

【讨论】：