TypeScript
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-loaderandngx-template-loader. - Vue ignores the base and uses
ts-loaderand applies it to both.tsxand.vuefiles. - React adds
react-docgen-typescript-pluginto 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:
| Field | Framework | Description | Type |
|---|---|---|---|
| check | All | Optionally run fork-ts-checker-webpack-plugin | boolean |
| checkOptions | All | Options to pass to fork-ts-checker-webpack-plugin if it's enabled | See docs |
| reactDocgen | React | Which react docgen processor to run: react-docgen-typescript, react-docgen, none | string |
| reactDocgenTypescriptOptions | React | Options to pass to react-docgen-typescript-plugin if react-docgen-typescript is enabled. | See docs |
