导入外部Interface后Storybook Controls不显示问题求助

以下是几个可行的解决方法：

• 配置Storybook识别TypeScript路径别名
  若使用了@models这类路径别名，需在Storybook配置中添加别名映射，确保它能正确解析外部类型文件。修改main.ts，新增webpackFinal配置：

  import type { StorybookConfig } from '@storybook/nextjs';
  const path = require('path');
  
  const config: StorybookConfig = {
    stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: [
      '@storybook/addon-links',
      '@storybook/addon-essentials',
      '@storybook/addon-interactions'
    ],
    framework: {
      name: '@storybook/nextjs',
      options: {}
    },
    docs: {
      autodocs: 'tag'
    },
    webpackFinal: async (config) => {
      config.resolve!.alias = {
        ...config.resolve!.alias,
        '@models': path.resolve(__dirname, '../models'),
      };
      return config;
    },
  };
  export default config;
  

• 确保类型文件被TypeScript编译包含
  检查项目根目录的tsconfig.json，确认include数组覆盖了存放IInput的models文件夹：

  {
    "include": [
      "next-env.d.ts",
      "**/*.ts",
      "**/*.tsx",
      "models/**/*.ts"
    ]
  }
  

• 显式标注组件Props类型（兜底方案）
  如果自动类型拾取仍异常，可在组件文件中显式重定义Props类型，辅助Storybook识别：

  import type { IInput } from '@models/components/input';
  
  type InputProps = IInput;
  
  const Input = ({ field, form, ...props }: InputProps) => {
    // 组件逻辑
  };
  

• 确认外部接口已正确导出
  检查存放IInput的外部文件，必须使用export关键字导出接口：

  // 外部文件中
  export interface IInput {
    type?: 'text' | 'number' | 'password';
    name: string;
    placeholder?: string;
    value?: string;
    // ...
  }
  

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