我怎样才能解决打字稿和@storybook/addon-knobs的问题

Question

我想使用 @storybook/addon-knobs 方法 text。我在我的代码 type ButtonColor = 'primary' | 'transparent' | 'light' 中设置了这种类型，我想在输入中写入文本（来自插件的文本）：

const ButtonStories = () => (
  <Button
    borderRadius={16}
    color={text('color', 'primary')}
  >
    {text('value', 'Button')}
  </Button>
)

但是当我使用它时出现错误：

Type 'string' is not assignable to type 'primary' | 'light' | 'transparent' | undefined

我该如何解决？

Answer 1

问题是 text 确实 return 一个字符串，没有任何东西限制用户输入任何值，但是您可以改用无线电组件。

// Change ButtonColor where it's defined
enum ButtonColor { primary = 'primary', transparent = 'transparent', light = 'light' }

// use enum values as Array.
const ButtonColors = Object.keys(ButtonColor)

// Or redefine all values as an array
// const ButtonColors = ['primary', 'transparent', 'light']

const ButtonStories = () => (
  <Button
    borderRadius={16}
    color={radio('color', ButtonColors, ButtonColor.primary)}
  >
    {text('value', 'Button')}
  </Button>
)

Answer 2

您可以使用 Type Assertion 代替，使用 as 关键字。

const color = text('color', 'primary') as 'primary' | 'transparent' | 'light'

const ButtonStories = () => (
  <Button
    borderRadius={16}
    color={color}
  >
    {text('value', 'Button')}
  </Button>
)

我怎样才能解决打字稿和@storybook/addon-knobs的问题

How can I solve problem with typescript and @storybook/addon-knobs

typescript

reactjs

storybook