Storybook, React, and TypeScript

Michael Moore
Dec 29, 2017 · 1 min read

I already had a ReactJS and TypeScript “starter” repo, but I wanted to add Storybook. Storybook doesn’t come setup with TypeScript by default, so here is how I got it working. I was sloppy this time around and didn’t save the links to the couple of repos/articles I used to troubleshoot this online, so please forgive the lack of references. Here are the instructions:

Install dependencies:

yarn add @storybook/react babel-core ts-loader @types/storybook__react @types/storybook__addon-options @types/storybook__addon-actions @types/storybook__addon-links --dev

Install storybook-cli globally so we can use it to init storybook in our project:

yarn global add @storybook/cli
getstorybook

Convert storybook index file to a tsx file:

mv ./stories/index.js ./stories/index.tsx

Update imports in ./stories/index.ts:

import React from 'react'

becomes…

import * as React from 'react'

Now we can remove the demo code and write some simple TypeScript to prove it works in the Storybook app (this is in ./stories/index.tsx)

import * as React from 'react';import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
type Foo = (props:FooProps) => JSX.Element
interface FooProps {
children?: any
}
const Foo:Foo = ({children}) => <div>{children}</div>
storiesOf('Welcome', module).add('to Storybook', () => <Foo children="Hello, World!" />)

Run yarn run storybook and navigate to http://localhost:6006 to see the working storybook app in the browser!

Here is the the working code: https://github.com/miketmoore/react-webpack-typescript-boilerplate

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store