Storybook中如何为带泛型参数的TypeScript Table组件指定Props类型参数

你碰到的这个错误很典型——因为TableProps是泛型类型，必须传入具体的类型参数才能让TypeScript和Storybook正确识别。下面一步步教你解决：

1. 先定义一个演示用的具体数据类型 #

首先，我们需要给Table组件指定一个实际的业务数据类型，比如模拟一个用户表格的类型：

// 示例用户数据类型
type User = {
  id: number;
  name: string;
  email: string;
  role: string;
};

2. 修正Table组件的类型定义小问题 #

你的Table函数定义里，props的类型漏写了泛型参数，得改成TableProps<T>才能让泛型正确传递：

function Table<T>(props: TableProps<T>) { 
  // 组件代码逻辑
}

3. 在Story中明确指定泛型类型参数 #

接下来修改你的Story代码，把我们定义的User类型传给TableProps，同时填充示例的表头和行数据：

import { Story } from '@storybook/react';
// 记得导入你的Table组件和刚才定义的User类型

export default { 
  title: 'Table', 
  component: Table, 
};

// 为Story模板指定具体的泛型类型：TableProps<User>
const Template: Story<TableProps<User>> = (args) => <Table<User> {...args} />;

export const Basic = Template.bind({});
// 填充示例参数，让Story能正常渲染
Basic.args = {
  ariaLabel: '用户表格',
  ariaLabelledBy: 'user-table-header',
  TableHeadCells: [
    { id: 'id', label: 'ID' },
    { id: 'name', label: '姓名' },
    { id: 'email', label: '邮箱' },
    { id: 'role', label: '角色' },
  ],
  TableRowsCells: [
    { id: 1, name: '张三', email: 'zhangsan@example.com', role: '管理员' },
    { id: 2, name: '李四', email: 'lisi@example.com', role: '编辑' },
  ],
  defaultOrderBy: 'name',
};

4. 可选：创建可复用的泛型Story模板 #

如果你需要为不同类型的表格创建Story，可以写一个泛型模板函数，省去重复代码：

// 通用的泛型Story创建函数
function createTableStory<T>(args: TableProps<T>) {
  const Template: Story<TableProps<T>> = (storyArgs) => <Table<T> {...storyArgs} />;
  const story = Template.bind({});
  story.args = args;
  return story;
}

// 比如创建一个产品表格的Story
type Product = {
  sku: string;
  productName: string;
  price: number;
};

export const ProductTable = createTableStory<Product>({
  ariaLabel: '产品表格',
  ariaLabelledBy: 'product-table-header',
  TableHeadCells: [
    { id: 'sku', label: '产品编号' },
    { id: 'productName', label: '产品名称' },
    { id: 'price', label: '价格' },
  ],
  TableRowsCells: [
    { sku: 'PROD-001', productName: '无线耳机', price: 99.99 },
    { sku: 'PROD-002', productName: '蓝牙音箱', price: 49.99 },
  ],
});

这样修改后，Storybook就能正确识别泛型类型，不会再抛出“需要类型参数”的错误了。

内容的提问来源于stack exchange，提问作者Hasina Njaratin