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;