Storybook provides an integrated TypeScript experience, including zero-configuration setup and built-in types for APIs, addons, and stories.
Configure Storybook with TypeScript
Storybook's configuration file (i.e., main.ts
) is defined as an ESM module written in TypeScript, providing you with the baseline configuration to support your existing framework while enabling you stricter type-checking and autocompletion in your editor. Below is an abridged configuration file.
See the main configuration API reference for more details and additional properties.
See the Vite builder TypeScript documentation if using @storybook/builder-vite
.
Extending the default configuration
Additional options are available for the typescript
configuration option. See the config.typescript
API reference for more information.
Write stories with TypeScript
Storybook provides zero-config TypeScript support, allowing you to write stories using this language without additional configuration. You can use this format for improved type safety and code completion. For example, if you're testing a Button
component, you could do the following in your story file:
The example above uses the power of TypeScript in combination with the exported generic types (Meta
and StoryObj
) to tell Storybook how to infer the component's metadata and the type of the component's inputs (e.g., props). This can greatly improve the developer experience by letting your IDE show you what properties are injected by Storybook.
TypeScript 4.9 support
Assuming that you're working on a project that uses TypeScript 4.9+, you can update your component stories to use the new satisfies
operator to ensure stricter type checking for your component stories. For example:
Now, when you define a story or update an existing one, you'll automatically get notified that you're missing a required arg
. However, you're not limited to using the satisfies
operator at the component level. If you need, you can also use it at the story level. For example:
Troubleshooting
The satisfies
operator is not working as expected
Out of the box, Storybook supports the satisfies
operator for almost every framework already using TypeScript version 4.9 or higher. However, due to the constraints of the Angular and Web Components framework, you might run into issues when applying this operator for additional type safety. This is primarily due to how both frameworks are currently implemented, making it almost impossible for Storybook to determine if the component property is required. If you encounter this issue, please open up a support request on GitHub Discussions.