TypeScript 対応

関連

stories ファイルに .tsx を含める

.storybook/main.jsのstoriesを['../src/**/*.stories.tsx']のように変更し、 TypeScript なストーリーファイルを Storybook が見るようにします。

Webpack 編集

Storybook の Webpack はデフォルトでは TypeScript をサポートしていません。storiesを変えただけではうまくそれらを扱えません。それらを扱えるようにts-loaderを導入します。また、まだ TypeScript がインストールされてないならそれも入れます。

yarn add -D ts-loader typescript

そして.storybook/main.jsを再度編集します。storiesと同じ階層にはwebpackFinalというセクションが置け、ここで Webpack を弄れます。
このセクションは関数で、引数として Storybook が構築した Webpack Config を渡してくるので、そこに対して TypeScript 関連の設定を追加します。設定後は関数の戻り値としてその Config を返さなければなりません。

TypeScript 関連の設定は以下のように行います。

module.exports = {
  stories: /* ...略... */,
  webpackFinal(config) {
    config.module.rules.push({
      test: /\.tsx?$/,
      use: [
        {
          loader: require.resolve('ts-loader'),
          options: {
            transpileOnly: true
          }
        }
      ]
    })

    config.resolve.extensions.push('.ts', '.tsx');

    return config;
  }
};

ここで行ってることは2つです。

.tsまたは.tsxファイルをts-loaderを通してトランスパイルする
.tsまたは.tsxファイルは拡張子を省略してインポートできる

React 時の設定

もし React と一緒に使いたい場合は、以下のようになる TypeScript の設定が必要です。

JSX を使い
要素の生成関数にはReact.createElementを使う

これにはcompilerOptions.jsxの値にreactを設定します。
また作ってるものがライブラリの場合はcompilerOptions.esModuleInteropもfalseにしておくとトランスパイル後のコードが減ります。このオプションのオン・オフの違いはimport Reactかimport * as Reactで読み込むか位の違いです。

React 時のプロジェクト例について置いておきます。