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-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
传递给 fork-ts-checker-webpack-plugin
的选项,如果 启用。请参阅 文档以获取可用选项。
.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
默认值
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-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
配置传递给 react-docgen-typescript-plugin
的选项(如果启用了 react-docgen-typescript
)。请参阅 Webpack 项目的文档或 Vite 项目的文档,以获取可用选项。
.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
禁用通过编译器解析 TypeScript 文件,该编译器用于 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;