typescript

類型

{
  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，則設定要傳遞至 react-docgen-typescript-plugin 的選項。請參閱可用選項的文件。

.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;