# Storybook, React, and TypeScript

Note: I originally posted this on Medium.

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';

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