类型不可分配给类型 |同时学习打字稿和故事书

Question

我已经设置了 Story book，并且正在尝试将默认按钮组件从 JS 转换为 TSX。除了向接口添加任何类型以使其正常工作之外，我之前没有使用过打字稿。错误指向这一行

const 模板：故事 = (args) => //此处错误 {...args} />;

以上是我的编辑器指出类型错误的地方。我不太清楚为什么，所以任何关于为什么会发生这种情况的指导都会很棒，我很乐意阅读，但一些正确方向的指示会很棒。

这是我的Button.stories.tsx

import React from 'react';
import {Story, Meta} from "@storybook/react"

import { Button, ButtonProps } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
} as Meta;

const Template: Story<ButtonProps> = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Button',
};

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Button',
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};

这是我的Button.tsx

import React from 'react';
import './button.css';

export interface ButtonProps {
  primary?: boolean;
  backgroundColor?: string;
  size?: "small" | "medium" | "large";
  label?: string;
  onClick?:(
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ) => void;
};

/**
 * Primary UI component for user interaction
 */
export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
  return (
    <button
      type="button"
      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
      style={backgroundColor && { backgroundColor }}
      {...props}
    >
      {label}
    </button>
  );
};

这是我遇到的错误

Type '{ primary?: boolean; backgroundColor?: string; size?: "large" | "small" | "medium"; label?: string; onClick?: (event: MouseEvent<HTMLButtonElement, MouseEvent>) => void; }' is not assignable to type '{ [x: string]: any; primary: any; backgroundColor: any; size: any; label: any; }'.
  Property 'primary' is optional in type '{ primary?: boolean; backgroundColor?: string; size?: "large" | "small" | "medium"; label?: string; onClick?: (event: MouseEvent<HTMLButtonElement, MouseEvent>) => void; }' but required in type '{ [x: string]: any; primary: any; backgroundColor: any; size: any; label: any; }'.

Answer 1

您的 Button 组件接受与您声明的 ButtonProps

不同的道具

解决方案 1：在 Button 组件 decleration 中使用 Button 道具

export const Button = ({ primary, backgroundColor, size, label, onClick}:ButtonProps) => {
  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
  return (
    <button
      type="button"
      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
      style={backgroundColor && { backgroundColor }}
      onClick
    >
      {label}
    </button>
  );
};

解决方案 2：为组件使用的实际道具导出特定类型：

export interface ActualButtonProps {
  primary: boolean;
  backgroundColor: string;
  size: "small" | "medium" | "large";
  label: string;
  props: {[x:string]:any}
}

export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
  return (
    <button
      type="button"
      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
      style={backgroundColor && { backgroundColor }}
      {...props}
    >
      {label}
    </button>
  );
};

在你的故事书中：

const Template: Story<ActualButtonProps> = (args) => <Button {...args} />;