typescript

类型：

¥Type:

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

配置 Storybook 如何处理 TypeScript 文件。

¥Configures how Storybook handles TypeScript files.

`check`

类型：boolean

¥Type: boolean

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

¥Optionally run fork-ts-checker-webpack-plugin. Note that because this uses a Webpack plugin, it is only available when using the Webpack builder.

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-webpack5)
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

¥Type: CheckOptions

如果是 enabled，则传递给 fork-ts-checker-webpack-plugin 的选项。参见可用选项的文档。

¥Options to pass to fork-ts-checker-webpack-plugin, if enabled. See docs for available options.

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-webpack5)
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

¥Type: 'react-docgen' | 'react-docgen-typescript' | false

默认：

¥Default:

false：如果未安装 @storybook/react

¥false: if @storybook/react is not installed
'react-docgen'：如果安装了 @storybook/react

¥'react-docgen': if @storybook/react is installed

配置 Storybook 用于解析 React 组件的库（如果有），react-docgen 或 react-docgen-typescript。设置为 false 以禁用解析 React 组件。react-docgen-typescript 调用 TypeScript 编译器，这使其速度变慢但通常准确。react-docgen 执行自己的分析，速度更快但不完整。

¥Configures which library, if any, Storybook uses to parse React components, react-docgen or react-docgen-typescript. Set to false to disable parsing React components. react-docgen-typescript invokes the TypeScript compiler, which makes it slow but generally accurate. react-docgen performs its own analysis, which is much faster but incomplete.

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, react-vite)
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

¥Type: ReactDocgenTypescriptOptions

如果启用了 react-docgen-typescript，则配置传递给 react-docgen-typescript-plugin 的选项。参见可用选项的文档。

¥Configures the options to pass to react-docgen-typescript-plugin if react-docgen-typescript is enabled. See docs for available options.

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, react-vite)
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

¥Type: boolean

禁用通过编译器解析 TypeScript 文件，该编译器用于 Webpack5。

¥Disable parsing of TypeScript files through the compiler, which is used for Webpack5.

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5)
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;