如何为泛型类型的Vue组件创建Storybook故事？

针对Vue3泛型组件在Storybook中使用satisfies做类型检查时的报错问题，这里提供两种无需移除泛型、也不用any的可行方案：

方案一：实例化具体类型的组件副本 #

泛型组件本身是一个类型构造器，直接传入Meta<typeof BaseGrid>会因为泛型参数未绑定而触发类型错误。可以先创建一个绑定了具体类型的组件实例，再基于它编写Storybook配置：

// 定义符合GridRow约束的具体行类型
type MyGridRow = { id: number; name: string };

// 将泛型组件断言为绑定了具体类型的版本
const TypedBaseGrid = BaseGrid as typeof BaseGrid<MyGridRow>;

// 基于实例化后的组件定义meta，此时类型检查正常
const meta = {
  title: 'data-display/BaseGrid',
  component: TypedBaseGrid,
  argTypes: {},
  args: {},
} satisfies Meta<typeof TypedBaseGrid>;

这种方式通过绑定具体类型，让Storybook的Meta类型能正确推断组件的props和事件类型，完全保留原组件的泛型约束，不会丢失类型安全。

方案二：手动扩展Storybook的Meta类型 #

如果不想创建组件副本，可以直接为Storybook的Meta类型指定泛型实例后的组件类型，强制meta符合该类型约束：

import type { Meta, StoryObj } from '@storybook/vue3';
import BaseGrid from './BaseGrid.vue';
import type { GridRow } from './types';

// 定义具体的行类型
type MyGridRow = { id: number; name: string };

// 手动构造对应泛型实例的Meta类型
type BaseGridMeta = Meta<typeof BaseGrid<MyGridRow>>;

// 用satisfies约束meta符合上述类型
const meta = {
  title: 'data-display/BaseGrid',
  component: BaseGrid,
  argTypes: {},
  args: {
    rows: [{ id: 1, name: '测试行' }] // 此处会获得正确的类型提示
  },
} satisfies BaseGridMeta;

// 故事也可以复用该类型获得类型提示
type BaseGridStory = StoryObj<typeof meta>;

export const Default: BaseGridStory = {};

这种方法无需修改组件本身，直接通过类型扩展让Storybook识别泛型组件的具体类型，同样能保证所有配置和故事的类型安全。

注意事项 #

• 确保GridRow基类的定义正确，让具体行类型能满足T extends GridRow的约束
• 如果需要为不同类型的行编写故事，可以创建多个独立的meta配置，每个绑定对应的具体类型
• 当前Storybook官方对Vue3泛型组件的原生类型支持存在局限，上述两种方法是社区常用的规避方案，无需放弃泛型特性或使用any妥协

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