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 show 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", false | string or false |
| reactDocgenTypescriptOptions | React | Options to pass to react-docgen-typescript-plugin if react-docgen-typescript is enabled. | See docs |
Overriding the configuration to infer additional props
The configuration provided above will remove any props from any third-party libraries.
If required, you can adjust the configuration and include the extra props.
Adjust the configuration as demonstrated below. And the next time you restart your Storybook, the extra props will also be in the UI.
