Storybook TypeScript preset

One-line TypeScript configuration for Storybook.

• Installation
• Advanced usage
• Options
  • forkTsCheckerWebpackPluginOptions
  • include
  • transpileManager

Installation

First, install this preset to your project.

npm install -D @storybook/preset-typescript ts-loader fork-ts-checker-webpack-plugin # or yarn

Once installed, add this preset to the appropriate file:

• ./.storybook/main.js (for Storybook 5.3.0 and newer)

  module.exports = {
    addons: ['@storybook/preset-typescript'],
  };
  

• ./.storybook/presets.js (for all Storybook versions)

  module.exports = ['@storybook/preset-typescript'];
  

Advanced usage

You can also pass extra configuration options to configure the preset. For example:

// ./storybook/main.js
const path = require('path');

module.exports = {
  addons: [
    {
      name: '@storybook/preset-typescript',
      options: {
        tsLoaderOptions: {
          configFile: path.resolve(__dirname, './tsconfig.json'),
        },
        forkTsCheckerWebpackPluginOptions: {
          colors: false, // disables built-in colors in logger messages
        },
        include: [path.resolve(__dirname, '../src')],
        transpileManager: true,
      },
    },
  ],
};

All available options are described in the Options section below.

Options

forkTsCheckerWebpackPluginOptions

Type: Object

Default value

undefined;

fork-ts-checker-webpack-plugin options. transpileOnly flag needs to be set to true in tsLoaderOptions to be able to set options for this webpack plugin.

include

Type: Rule condition

Default value

undefined;

include rule for /\.tsx?$/.

transpileManager

Type: Boolean

Default value

false;

Toggles TypeScript transpilation on manager side.