Storybook v6において、コンポーネントのPropsに型を指定する

背景

Storybook v6.5.16（2023年1月）時点では、CSFにおいてコンポーネントのProps（=args）の型がすべてOptionalになってしまうという問題があります。
つまりStorybook上では、必須なPropsを指定しなくてもエラーは発生しないということです。
このままだとランタイムエラーが発生したり、ESLintのwarningが発生して困ったので、argsの型を指定することにしました。

https://github.com/storybookjs/storybook/issues/13747

結論

ComponentPropsを使って、argsの型を指定しています。
これでargsが型チェックが機能します。

Component.tsx

import { FC, ReactNode } from "react";

type ComponentProps = {
  children: ReactNode;
};

export const Component: FC<ComponentProps> = ({ children }) => {
  return <div>{children}</div>;
};

Component.stories.tsx

import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
import { ComponentProps } from "react";

import { Component } from "./Component";

type Story = ComponentStoryObj<typeof Component> & { args: ComponentProps<typeof Component> };

export const Default: Story = {
  args: {
    children: 'str',
  },
};

export const Error: Story = {
  args: {}, // children propsが指定されていないのでエラーとなる
};