Storybook装饰器示例中Story参数的TypeScript类型应如何指定？

为什么标注 any 依然通不过 linter 校验 #

• 大多数团队启用的 TypeScript 代码检查规则中，包含禁止显式使用any的校验项，这种写法本身就会触发规则报错，和类型标注的实际对错无关。
• 直接使用any会丢失所有类型校验保护，既不符合项目代码规范要求，也无法在开发阶段识别组件传参、渲染逻辑的潜在问题。

正确的类型实现方式 #

Storybook 核心包中已经内置了适配装饰器场景的类型定义，不需要手动自定义复杂的参数类型，直接导入内置类型使用即可：

• 兼容全版本的通用写法：从@storybook/react模块导入StoryFn类型，直接标注到装饰器的Story参数上。
• Storybook 7+ 版本的优化写法：从@storybook/react模块导入Decorator类型，通过satisfies语法标注整个装饰器函数，TypeScript 会自动推导Story参数的类型，不需要手动单独标注，完全满足linter对参数必须有明确类型的要求。

修正后的代码示例 #

通用兼容写法（适配所有Storybook主版本）：

import type { StoryFn } from '@storybook/react';

export const Primary = {
  decorators: [
    (Story: StoryFn) => (
      <div style={{ margin: '3em' }}>
        <Story />
      </div>
    )
  ]
};

Storybook 7+ 优化写法：

import type { Decorator } from '@storybook/react';

export const Primary = {
  decorators: [
    (Story) => (
      <div style={{ margin: '3em' }}>
        <Story />
      </div>
    ) satisfies Decorator
  ]
};

官方示例中省略类型标注，是因为默认场景下TypeScript可以自动推导参数类型。在开启严格校验规则的项目中，无论选择手动标注内置类型，还是通过类型推导明确参数类型，都不需要编写自定义的参数类型，也完全可以通过校验。另外你原写法中Primary.decorators的链式赋值存在语法逻辑问题，正确方式是在Story配置对象中直接声明decorators字段，不需要对未初始化的对象做属性链式赋值。

注：原代码中直接给参数标注Story: any的写法除了触发linter规则报错外，还会丢失组件props的类型提示，不建议使用。

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