95c4c154d6d0f6.md

title	emoji	type	topics	published
Storybook v6において、コンポーネントのPropsに型を指定する	📌	tech	Storybook React TypeScript	true

背景

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

storybookjs/storybook#13747

結論

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

import { FC, ReactNode } from "react";

type ComponentProps = {
  children: ReactNode;
};

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

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が指定されていないのでエラーとなる
};