@storybook/preset-typescript NPM

One-line TypeScript configuration for Storybook.

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

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.