StorybookのDecoratorの引数を、TypeScriptで型定義する

Storybook TypeScript

Storybookのストーリーファイルをtsxで記述しているが、TypeScriptをstrictモードにしているため、Decoratorを定義する際、引数に型を付けないとエラーになる。

// パラメーター 'Story' の型は暗黙的に 'any' になります。
const decorator = Story => (
  <div style={{ maxWidth: '400px' }}>
    <Story />
  </div>
)

明示的に any を指定すると、今度は @typescript-eslint/no-explicit-any で警告が出るため、どんな型を指定すればいいか調べたのでメモ。

環境

Storybook v6.5.9、プロダクトコード側ではReact v18.2.0を使用。

調査と対応

StorybookのGithubを検索すると、以下のissueを発見。

github.com

export している型自体は Meta になる模様。

  • Reactの場合: import { Meta } from '@storybook/react/types-6-0'
  • Vue v3の場合: import { Meta } from '@storybook/vue3'

この Meta からソースコードを追っていくと、Reactの場合は PartialStoryFn<ReactFramework> を引数の型定義として指定できた。

import { PartialStoryFn } from '@storybook/csf'
import { ReactFramework } from '@storybook/react/types-6-0'

const decorator = (Story: PartialStoryFn<ReactFramework>) => (
  <div style={{ maxWidth: '400px' }}>
    <Story />
  </div>
)

振り返り

このために @ts-ignore や eslint-disable-next-line をつけるのもイマイチだと思っていたので、型がわかってよかった。

余談だが、はてなのシンタックスハイライト、 tsx 使えないのね。