Solution for using Storybook with TypeScript

[xogeny]

I'm following the StackOverflow tradition of asking a question and then answering it.

The question is:

"how can I use @kadira/storybook with TypeScript?"

It turns out, you can pretty much follow the Slow Start Guide and things will largely work. But there are a few tweaks. The first is that you should point your config.js file (I don't bother using TS here) at your stories written in TypeScript, e.g.,

import { configure } from '@kadira/storybook';

function loadStories() {
    console.log("Loading stories");
    require('../stories/visuals.tsx');
    // You can require as many stories as you need.
}

configure(loadStories, module);

Note the .tsx suffix there. Now the other part of making this work is recognizing that storybook is using webpack under the hood (and v1 at that).

The really nice thing with storybook is that the recognize that you will likely need to customize the webpack.config.js configuration and they make that relatively easy to do. Initially, I tried to include my own webpack.config.js, but that interferes with the storybook machinery. So instead, what I found worked quite well was to simply use the extension mechanisms already documented for storybook. This led me to this (assuming you have ts-loader and typescript as dev dependencies):

// load the default config generator.
var genDefaultConfig = require('@kadira/storybook/dist/server/config/defaults/webpack.config.js');

module.exports = function (config, env) {
    var config = genDefaultConfig(config, env);

    config.module.loaders.push({
        test: /\.tsx$/,
        loader: 'ts-loader'
    })
    config.module.loaders.push({
        test: /\.ts$/,
        loader: 'ts-loader'
    })
    config.resolve.extensions.push(".tsx");
    config.resolve.extensions.push(".ts");

    return config;
};

As you can see, this is just boilerplate. It doesn't refer to any of my project's files or settings so you can pretty much use it as is. Just drop it in as .storybook/webpack.config.js in your project and you should be good to go.

The important thing to understand here is that by using storybook, webpack and ts-loader you are going to get hot module reloading of your TypeScript code for free, which is very sweet.

Hopefully people will find this useful.

[everdimension]

Thanks for posting your findings! I believe this info belongs to stackoverflow, though. Could you please post it there, too? I promise to upvote :)

[GeeWee]

@xogeny did you ever get this working with the new version of storybook?
Your method seems to work but leaves files lying around, e.g. index.tsx is converted into index.jsx that's placed in the same folder. I'd love to avoid that clutter.

[xogeny]

@everdimension, I actually wrote an article about this (updated to the most recent versions of those tools as of the time I wrote the article), you can find it here: https://medium.com/@mtiller/storybook-react-typescript-and-jest-c9059ea06fa7

@GeeWee I did the this working with Storybook 3.0. It works perfectly. Whether it leaves the .js(x) files lying around must depend on your tsconfig.json because I certainly don't see that (I set outDir in my tsconfig.json).

[GeeWee]

You're perfectly right @xogeny - also that article was very helpful.
What happened was, that somehow my "stories" folder had ended up in the exclude section of the tsconfig - which I assume meant that the outdir was completely ignored for everything, as that's the webpack entry point. Removing that fixed the issue.