Storybook+TypeScript自定义Args报错求助：类型与ESLint校验问题

问题根源 #

• TypeScript报错：原组件StatsDisplay的IProps类型中未定义data属性，但你在Story模板里解构了该属性，导致类型不匹配。
• ESLint报错：data未被纳入组件的props验证规则，ESLint无法识别这个自定义参数。

解决方案 #

1. 扩展Story的参数类型 #

需要为Story模板定义包含原组件Props和自定义data的联合类型，替换默认的ComponentStory绑定类型：

import { ComponentStory } from '@storybook/react';
import StatsDisplay from './StatsDisplay';

// 定义包含自定义data的Story参数类型
type StatsDisplayStoryProps = React.ComponentProps<typeof StatsDisplay> & {
  data: YourDataType; // 替换为你实际的data类型，比如Record<string, any>[]或自定义接口
};

// 使用自定义类型声明模板
const Template = ({ data, ...args }: StatsDisplayStoryProps) => {
  // 在这里编写data处理逻辑
  const processedData = handleData(data); // 示例数据处理函数
  return <StatsDisplay {...args} processedData={processedData} />;
};

2. 修复ESLint的props验证问题 #

有两种规范的处理方式：

• 方式一：配置ESLint忽略自定义参数
  在.eslintrc.js中为react/prop-types规则添加例外：

module.exports = {
  rules: {
    'react/prop-types': ['error', { ignore: ['data'] }]
  }
};

• 方式二：为自定义参数添加PropTypes
  如果需要保持props验证完整性，给Story模板的data添加PropTypes：

import PropTypes from 'prop-types';

Template.propTypes = {
  data: PropTypes.arrayOf(PropTypes.object).isRequired, // 根据你的data结构调整类型
};

3. 正确设置Story的args #

导出具体Story时，正常传入data和组件原有props：

export const Default = Template.bind({});
Default.args = {
  data: [/* 你的测试数据 */],
  // 原组件的props
  title: '统计面板',
  // ...其他组件props
};

关键说明 #

• Storybook的ComponentStory默认绑定组件的Props类型，自定义参数需要手动扩展类型，避免TypeScript类型冲突。
• ESLint的react/prop-types规则会检查所有传入组件的props，包括Story模板中的自定义参数，需通过配置或添加PropTypes解决报错。

内容的提问来源于stack exchange，提问作者Jack Blakeston