storybook [Bug]: TS类型别名不能被增强

kkbh8khc  于 5个月前  发布在  其他
关注(0)|答案(7)|浏览(43)

描述bug

据我所知,TypeScript类型别名(例如type Story = ...)不能是augmented,而TypeScript接口可以。这在Storybook类型中是一个很大的问题,因为似乎几乎所有导出的类型都是使用type别名完成的。
实际上,这意味着你不能用自己的属性扩展上下文或其他类型,它们总是被强制转换为any类型。

重现步骤

Pretty much all (with minor exceptions) of the types seem to be defined with `type` aliases instead of `interfaces` so just check any TS file in the repo. As an example: https://github.com/storybookjs/storybook/blob/next/code/renderers/server/src/types.ts

系统信息

System:
    OS: Linux 5.15 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (6) x64 AMD Ryzen 9 5900X 12-Core Processor
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 3.2.0 - ~/.nvm/versions/node/v16.14.0/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 100.0.4896.75
  npmPackages:
    @storybook/addon-a11y: ^7.0.0-alpha.42 => 7.0.0-alpha.43 
    @storybook/addon-docs: ^7.0.0-alpha.42 => 7.0.0-alpha.42 
    @storybook/addon-essentials: ^7.0.0-alpha.42 => 7.0.0-alpha.42 
    @storybook/addon-interactions: ^7.0.0-alpha.42 => 7.0.0-alpha.42 
    @storybook/addon-links: ^7.0.0-alpha.42 => 7.0.0-alpha.42 
    @storybook/jest: ^0.0.10 => 0.0.10 
    @storybook/test-runner: 0.10.0-next.1 => 0.10.0-next.1 
    @storybook/testing-library: ^0.0.13 => 0.0.13 
    @storybook/vue3: ^7.0.0-alpha.42 => 7.0.0-alpha.42 
    @storybook/vue3-vite: ^7.0.0-alpha.42 => 7.0.0-alpha.42

其他相关信息

  • 无响应*
bvjveswy

bvjveswy2#

在最新的alpha版本中,Parameters是一个接口,你现在可以对其进行增强:

declare module '@storybook/react' {
  interface Parameters extends A, B, C, D {}
}

还有其他我们导出的接口你想增强吗?

suzh9iv8

suzh9iv83#

@kasperpeulen StoryContext 是促使我创建这个问题的人 - 你通常可以通过装饰器向上下文添加内容。
还要使 VueFramework 类型成为从包中导出的各种 Storybook 类型的通用参数,因为否则很难使用一些通用的 Storybook 类型来创建新的类型

cidc1ykv

cidc1ykv4#

我明白了。我认为如果我们将StoryContext设为一个接口,总体上是好的。但是我不确定是否鼓励人们向上下文添加任意属性。

查看这个评论:
https://github.com/ComponentDriven/csf/blob/b170e3d459d5619384fdf181b91c0867c62fbd7a/src/story.ts#L109-L115

export type StoryContextUpdate<TArgs = Args> = {
  args?: TArgs;
  globals?: Globals;
  // NOTE: it is currently possibly to add *any* key you like to the context
  // (although you cannot override the basic keys). This will likely be removed in future.
  [key: string]: any;
};

你们觉得@tmeasday@yannbf有什么看法?也许我们应该推荐使用 parameters 来实现这个功能?

ars1skjm

ars1skjm5#

这就是我不得不改变上下文的原因,我认为你不能只用参数来实现同样的效果:https://craigbaldwin.com/blog/updating-args-storybook-vue/

bihw5rsg

bihw5rsg6#

也许我们应该推荐使用参数来实现这个功能?
我认为不应该,因为参数是装饰器中无法更新的东西之一[1]——参数的概念是它们是静态的,可以在任何地方使用(例如在管理器上)。
我认为args是这个回调的理想位置。我们建议的文章中的模式与fabis94非常接近,但我认为更简单一些(我不是VueMaven,所以如果这有误请原谅)——基本上,为什么要有额外的间接层来传递updateArgs函数呢?相反,装饰器可以直接执行:

(story, context) => {
  const [_, updateArgs] = useArgs()
  const handleQuantityUpdate = (quantity) => updateArgs({ quantity });
  return story({ args: { handleQuantityUpdate } });
},

注意FTR,您不需要将整个上下文传递给storyFn或整个args传递给updateArgs
[1]虽然实际上我认为您不应该能够更新其他内容,如全局变量等。

l3zydbqr

l3zydbqr7#

好的,那么如果能够增强Args类型也是很好的。同时,如果能够通过通用参数来修改其内容,使得在填写Story.args时可以进行类型检查,那就更好了。
(我认为这两者都很重要,而不是其中一个或另一个。全局增强Args类型将允许进行全局调整(例如通过装饰器),而通用参数将允许在不同故事中指定不同的参数)

相关问题