参加直播会议:美国东部时间周四上午 11 点,Storybook 9 发布与问答
文档
Storybook 文档

typescript

父级: main.js|ts 配置

类型

{
  check?: boolean;
  checkOptions?: CheckOptions;
  reactDocgen?: 'react-docgen' | 'react-docgen-typescript' | false;
  reactDocgenTypescriptOptions?: ReactDocgenTypescriptOptions;
  skipCompiler?: boolean;
}

配置 Storybook 如何处理 TypeScript 文件

check

类型: boolean

可选运行 fork-ts-checker-webpack-plugin。请注意,由于这使用了 Webpack 插件,因此仅在使用 Webpack 构建器时可用。

.storybook/main.ts
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  typescript: {
    check: true,
  },
};
 
export default config;

checkOptions

类型: CheckOptions

要传递给 fork-ts-checker-webpack-plugin 的选项(如果启用)。请参阅文档了解可用选项。

.storybook/main.ts
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  typescript: {
    check: true,
    checkOptions: {
      eslint: true,
    },
  },
};
 
export default config;

reactDocgen

类型: 'react-docgen' | 'react-docgen-typescript' | false

默认值

  • false: 如果 @storybook/react 未安装
  • 'react-docgen': 如果 @storybook/react 已安装

配置 Storybook 使用哪个库(如果有)来解析 React 组件,是 react-docgen 还是 react-docgen-typescript。设置为 false 可禁用 React 组件解析。react-docgen-typescript 调用 TypeScript 编译器,这会使其变慢但通常更准确。react-docgen 执行自己的分析,速度快得多但不完整。

.storybook/main.ts
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  typescript: {
    reactDocgen: 'react-docgen',
  },
};
 
export default config;

reactDocgenTypescriptOptions

类型: ReactDocgenTypescriptOptions

配置要传递给 react-docgen-typescript-plugin 的选项(如果 react-docgen-typescript 已启用)。请参阅 Webpack 项目Vite 项目的文档了解可用选项。

.storybook/main.ts
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  typescript: {
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      // 👇 Default prop filter, which excludes props from node_modules
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
};
 
export default config;

skipCompiler

类型: boolean

禁用通过编译器解析 TypeScript 文件,这用于 Webpack5。

.storybook/main.ts
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  typescript: {
    skipCompiler: true,
  },
};
 
export default config;