带有 Typescript keyof 的 Storybook 控件

Question

我正在构建一些与 Storybook 一起使用的组件，并遇到了 Typescript 推断类型的小障碍。

为了 DRY 代码，我宁愿不必在故事本身中定义控件的选项，但是它似乎没有正确推断选项。

我有一个具有 'option' 属性的 Button 组件。可用选项是基于主题中值的字符串：

buttonTheme?: keyof Theme['palette']['button']

如果我将 Prop 类型从 keyof Theme['palette']['button'] 更改为键列表，那么这工作正常，但是这增加了另一个地方来更新值应该更多地添加，就像将它们显式添加到故事中一样.

我已经尝试将 shouldExtractValuesFromUnion 选项添加到 reactDocgenTypescriptOptions，但这只是提供了 string | number | symbol 的单选按钮选项，这不是我想要的并且实际上破坏了功能（它也弄乱了布尔值并将它们从切换开关更改为 true | false 单选按钮）。

我在故事书的 main.ts 文件中的打字稿配置是：

typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      compilerOptions: {
        allowSyntheticDefaultImports: true,
        esModuleInterop: true,
      },
      // shouldExtractValuesFromUnion: true,
      shouldExtractLiteralValuesFromEnum: true,
      shouldRemoveUndefinedFromOptional: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },

不确定是否有设置或我遗漏的东西，或者我是否必须接受我必须在故事文件中明确定义选项的事实。任何帮助将不胜感激。

Answer 1

因此，当您向配置中添加自定义 typescript 部分时，某些设置似乎会尽快更改。

我删除了配置中的 typescript 条目，一切都恢复正常，但如果我将其重新添加（即使是空的），它也会中断。一定有一些我可以复制和更改的默认设置 one-by-one 以查看罪魁祸首，但在查看存储库时我找不到它们。

如果我以后需要任何设置，我可能会进一步研究它，但现在这对我在代码中取回枚举有效。把它放在这里以防将来有人偶然发现它。

带有 Typescript keyof 的 Storybook 控件

Storybook Controls with Typescript keyof

typescript

reactjs

storybook