React

Most people in programming circles have at least a cursory awareness of React at this point - it's the in vogue JavaScript library for building frontend and mobile applications.

Storybook

Storybook is gaining traction but not quite as well known; it's a really interesting interactive environment for creating and displaying UI components written with React.

Their GIF sums it up pretty well:

TypeScript

TypeScript is more focused on the development process, introducing types and structures like interfaces as an extension to JavaScript to make development more predictable and safer.

Creating-React-App

As it turns out, not that many people have tried to use TypeScript with Storybook, andtheirexamples were sometimes out of date using old versions of Storybook and some parts weren't working exactly as expected.

It looks like Storybook isn't using the normal Webpack process that create-react-app setup for us. If we check the docs, it turns out they do give us a way to extend the Webpack config, by adding a webpack.config.js to the .storybook directory, so we can setup a TypeScript loader to process the story files.

This required me to re-run Storybook, but after that I was greeted with... more errors :(

At least these weren't quite so red. And looking at them, it seems quite positive, we just need to convert our TypeScript files fully rather than just renaming them from .jsx to .tsx.

The first error is an easy fix, just change the first line in our story to:

// prev: import React from 'react';
import * as React from 'react';

The next few errors are asking us for type declarations for our imports, so TypeScript can do proper type checking. We can install these from npm, however I found the package names were a little unintuitive.

As it's a change to the Webpack config, I once again had to stop and start Storybook again.

And finally, one last error:

As it turns out, this now upsets the TypeScript compiler which complains that our stories aren't in the default rootDir that create-react-app setup for us (which is src). This is an easy fix, by opening up tsconfig.json and updating: