为什么storybook/react中需要ComponentStory、ComponentMeta

Question

import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';

import Button, { Props } from 'components/Button';

export default {
  title: 'UI/Button',
  component: Button,
  argTypes: {},
} as ComponentMeta<typeof Button>;

const Template: ComponentStory<typeof Button> = ({
  onClick,
  children,
}: Props) => <Button onClick={onClick}>{children}</Button>;

export const Primary = Template.bind({});

Primary.args = {
  children: 'Button',
};

我真的不明白ComponentMeta<typeof Button>真正添加的是什么，而且ComponentStory<typeof Button>，当您不添加它时，typescript只是突出显示.args上不存在的内容Template。而且，typeof Button它只是一个function. 它可以写得更好或更简单，还是我可以跳过它，它看起来很奇怪，就像样板文件一样？

Answer 1

这些类型不仅为您提供 Meta 和 Story 属性的类型安全性和自动完成功能，而且还自动推断传递到泛型的组件的 props 并在 args 属性中反映这些类型。

这很棒，因为这样您就不需要仅仅为了满足 Storybook 而导出组件的道具类型。

请注意使用 Intellisense（自动完成）时类型转换和无类型转换之间的区别：