storybook [Bug]: 对于ControlType的错误不正确的空类型

u2nhd7ah 于 2个月前发布在其他

关注(0)|答案(1)|浏览(35)

描述bug

我刚刚从v8.1.11升级到v8.2.5,并开始看到

control.type正确支持null,但显示为类型错误：
Type 'null' is not assignable to type 'ControlType | undefined'.

复现链接

/

复现步骤

这是一个Vue3和Typescript 5项目：

安装sb@8.1.11并将一个参数的control类型设置为control: { type: null }。这应该禁用该参数的所有控件，并在原地显示一个-
在编辑器中引用control的接受类型。它应该在node_modules/@storybook/csf/dist/index.d.ts属性类型节点中显示ControlType | null
现在升级到最新的SB@v8.2.5。重新运行storybook。现在type有一个错误，当引用类型时，它现在显示为'ControlType | undefined'作为可用类型

系统

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.15.0 - ~/n/bin/node
    npm: 10.7.0 - ~/n/bin/npm <----- active
    pnpm: 8.7.4 - ~/n/bin/pnpm
  Browsers:
    Chrome: 126.0.6478.183
    Safari: 17.5
  npmPackages:
    @storybook/addon-a11y: 8.2.5 => 8.2.5
    @storybook/addon-designs: 8.0.3 => 8.0.3
    @storybook/addon-essentials: 8.2.5 => 8.2.5
    @storybook/addon-interactions: 8.2.5 => 8.2.5
    @storybook/addon-links: 8.2.5 => 8.2.5
    @storybook/addon-webpack5-compiler-swc: 1.0.4 => 1.0.4
    @storybook/blocks: 8.2.5 => 8.2.5
    @storybook/manager-api: 8.2.5 => 8.2.5
    @storybook/test: 8.2.5 => 8.2.5
    @storybook/theming: 8.2.5 => 8.2.5
    @storybook/vue3: 8.2.5 => 8.2.5
    @storybook/vue3-webpack5: 8.2.5 => 8.2.5
    eslint-plugin-storybook: 0.8.0 => 0.8.0
    storybook: 8.2.5 => 8.2.5

其他上下文

无响应*

storybook

来源：https://github.com/storybookjs/storybook/issues/28677

1条答案

按热度按时间

zqry0prt1#

免责声明：由于信息是自动生成的，可能存在不准确的情况。
解决步骤：

更新类型定义：
将 ControlType 类型的定义修改为在 node_modules/@storybook/csf/dist/index.d.ts 中包含 null 。

export type ControlType = 'boolean' | 'number' | 'range' | 'object' | 'file' | 'radio' | 'inline-radio' | 'check' | 'multi-select' | 'select' | 'text' | 'color' | 'date' | null;

检查控件类型使用情况：
确保 ControlType 在相关文件中正确使用。例如，在 /code/addons/controls/template/stories/basics.stories.ts 中，验证控件类型是否正确分配。

export default {
  component: globalThis.Components.Pre,
  decorators: [
    (storyFn: PartialStoryFn, context: StoryContext) =>
      storyFn({ args: { object: { ...context.args } } }),
  ],
  argTypes: {
    boolean: { control: 'boolean' },
    color: { control: 'color' },
    // Add other controls here
    customControl: { control: null }, // Example of using null
  },
};

更新提取器函数：
在 /code/renderers/svelte/src/docs/extractArgTypes.ts 中，确保 parseTypeToControl 函数能够处理 null 值。

const parseTypeToControl = (type: JSDocType | undefined): any => {
  if (!type) {
    return null;
  }
  // Existing type handling logic
  return null;
};

参考资料：
/test-storybooks/server-kitchen-sink/stories/addons/controls.stories.json
/code/addons/controls/template/stories/conditional.stories.ts
/code/presets/server-webpack/src/lib/compiler/testfixtures/controls.json
/code/core/src/preview-api/modules/store/inferControls.test.ts
/code/renderers/svelte/src/docs/extractArgTypes.ts
/code/core/src/preview-api/modules/store/inferControls.ts
/code/renderers/react/template/stories/docgen-components/ts-types/argTypes.snapshot
/code/lib/blocks/src/controls
/docs/_snippets/storybook-merged-argtypes.md
/code/core/src/preview-errors.ts
/code/addons/controls/template/stories/basics.stories.ts
/code/renderers/server/src/render.ts
/code/lib/blocks/src/controls/Object.stories.tsx
/code/renderers/react/template/stories/docgen-components/8140-js-prop-types-oneof/properties.snapshot
/code/addons/controls/template/stories/issues.stories.ts
/code/addons/controls/template/stories
/code/core/src/__tests/preview-errors.test.ts
/code/core/src/docs-tools
/code/renderers/vue3/src/public-types.test.ts
/code/renderers/react/template/stories/docgen-components/8143-ts-imported-types/argTypes.snapshot
/docs/_snippets/arg-types-control.md
/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/argTypes.snapshot
/docs/_snippets/arg-types-in-preview.md
/code/renderers/server/template/cli/button.stories.json
/docs/_snippets/storybook-addon-controls-custom-matchers.md

赞(0）回复(0）举报 2个月前

我来回答

storybook [Bug]: 对于ControlType的错误不正确的空类型

描述bug

复现链接

复现步骤

系统

其他上下文

1条答案

相关问题

热门标签

最新问答