typescript 文章上的类型安全额外控件

rqenqsqc 于 2023-04-22 发布在 TypeScript

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

我有一个Chip组件，它从它的leftSection属性中接受一个额外的元素，一个ReactNode。
然后，我有以下故事元数据：

const meta = {
  component: Chip,
  argTypes: {
    label: { control: 'text' },
    leftSection: {
      control: 'select',
      options: ['none', 'swatch'],
    },
    swatchColor: {
      control: 'color',
      if: { arg: 'leftSection', eq: 'swatch' },
    },
  },
} as Meta<Component>;

Chip组件没有swatchColor属性，它只在故事书上定义，用于编辑故事书本身的值。
但是在编写story对象时，它会引发一个类型错误：

export const Default: StoryObj<Component> = {
  render: (args) => {
    const { leftSection, swatchColor, ...rest } = args;
    //                   ^ type error here: Property 'swatchColor' does not exist

    if (leftSection === 'swatch') {
      return (
        <Chip
          leftSection={<ColorSwatch color={swatchColor} />}
          {...rest}
        />
      );
    }

    return <Chip {...rest} />;
  },

  args: {
    label: 'foo',
    leftSection: 'none',
  },
};

尽管它可以工作，但我想在我有类型安全的同时修复类型错误。
有没有一种方法可以对故事进行额外的控制，同时仍然让TS/故事书感到高兴？

typescript

来源：https://stackoverflow.com/questions/76016991/type-safe-extra-control-on-a-story

1条答案

按热度按时间

gk7wooem1#

我们可以在组件的Prop上附加我们的自定义故事 prop ，并使用它来代替Component。

import Chip, { Props } from './Chip';

type CustomStoryProps = { swatchColor: string };
type Component = Props & CustomStoryProps;

const meta: Meta<Component> = {
  //        ^ type safer than using `as` ✅
}

export const Default: StoryObj<Component> = {
  render: (args) => {
    const { leftSection, swatchColor, ...rest } = args;
    //                   ^ no more errors ✅

赞(0）回复(0）举报 2023-04-22

我来回答

typescript 文章上的类型安全额外控件

1条答案

相关问题

热门标签

最新问答