Storybook has built-in Typescript support, so your Typescript project should work with zero configuration needed.

Default configuration

The base Typescript configuration uses babel-loader for Typescript transpilation, and optionally fork-ts-checker-webpack-plugin for checking.

Each framework uses the base configuration unless otherwise specified:

  • Angular ignores the base and uses ts-loader and ngx-template-loader.
  • Vue ignores the base and uses ts-loader and applies it to both .tsx and .vue files.
  • React adds react-docgen-typescript-plugin to the base.

Main.js configuration

To make it easier to configure Typescript handling, use the typescript field in your .storybook/main.js.

The following code snippets shows the fields for you to use with TypeScript:

checkAllOptionally run fork-ts-checker-webpack-pluginboolean
checkOptionsAllOptions to pass to fork-ts-checker-webpack-plugin if it's enabledSee docs
reactDocgenReactWhich react docgen processor to run: react-docgen-typescript, react-docgen, nonestring
reactDocgenTypescriptOptionsReactOptions to pass to react-docgen-typescript-plugin if react-docgen-typescript is enabled.See docs