作成日 : 2022-04-24
storybook の Args の型推論をオプショナルじゃなくする
なぜこの記事を書いたか
Why CSF Args Type is Partial type ? でも語られている通り、Storybook でコンポーネントに Args(Props)を渡す際、すべてのプロパティがオプショナルになってしまう。
これでは、必須のプロパティを渡していなくても型エラーを検知できず、ランタイムエラーが発生してしまう。
上記リンクでも問題提起はされていて、解決されそうなので多分そのうち問題はなくなるはず。だけど、僕は今型定義が欲しいので、それっぽい感じにしてみた。
解決策
型定義(Generics)
import { ComponentStoryObj } from '@storybook/react'
import type { ComponentProps, FunctionComponent } from 'react'
type CSFType<C> = C extends FunctionComponent<any>
? ComponentStoryObj<C> & {
args: ComponentProps<C>
}
: never
export { CSFType }
各ストーリーブックで型定義
type StoryType = CSFType<typeof YourComponent>
各ストーリーオクジェクトに型付け
export const Default: StoryType = {
args: { tasks: defaultTasks, loading: false, onPinTask, onArchiveTask },
}
動作
onPinTaskが無いぞというのを警告してくれる。
Props の型定義
ちなみに props の定義はこう
type TaskType = { id: number; title: string; state: any; updatedAt: string }
type EventProps = { onArchiveTask: (id: number) => void; onPinTask: (id: number) => void }
type Props = {
task: TaskType
} & EventProps
免責
ちゃんと動かないパターンもあると思うので、そのへんはよしなに改造してください。