storybook の Args の型推論をオプショナルじゃなくする

2022-04-24

なぜこの記事を書いたか

Why CSF Args Type is Partial type ?でも語られている通り、Storybook でコンポーネントに Args(Props)を渡す際、すべてのプロパティがオプショナルになってしまう。これでは、必須のプロパティを渡していなくても型エラーを検知できず、ランタイムエラーが発生してしまう。上記リンクでも問題提起はされていて、解決されそうなので多分そのうち問題はなくなるはず。だけど、僕は今型定義が欲しいので、それっぽい感じにしてみた。

解決策

Why CSF Args Type is Partial type ? ##issuecomment-901117408を参考にしている

型定義(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;

免責

ちゃんと動かないパターンもあると思うので、そのへんはよしなに改造してください。

毎日文章を書き続けたいと思いもう数年が経っている React×Recoil×Storybook を動かす