New
You're viewing older docs for version 6.5. View latest docs

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-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 show the fields for you to use with TypeScript:

FieldFrameworkDescriptionType
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", falsestring or false
reactDocgenTypescriptOptionsReactOptions 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.

If you run into an issue where any additional props don't show up, check your component's code. If you're using a default export, change it to a named export, and doing that will ensure that the additional props are included.

Was this page helpful?

Markdown accepted ([link text](url), _italic_, **bold**, etc). Your anonymous feedback will be posted publicly on GitHub.

✍️ Edit on GitHub – PRs welcome!
Storybook
Join the community
6,616 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI