A StoryWithHooks and Typescript

[simple forge]

Hi, the example found here https://storybook.js.org/docs/react/writing-stories/introduction#working-with-react-hooks doesn't show any types like the other examples and I am still in the process of picking up TypeScript so I was hoping someone could confirm or suggest the correct way to type the following:

export default {
  title: 'Components/Atoms/Map',
  component: MapComponent,
  args: props,
} as Meta<typeof MapComponent>;

const MapWithHooks: StoryObj<typeof MapComponent> = (args) => {
  const dispatch = useAppDispatch();

  dispatch(
    setOrganisation({
      ...
    })
  );

  return <MapComponent {...args} />;
};

export const Map = {
  render: (args) => <MapWithHooks {...args} />,
};

[viral knoll]

Hi! In your example above, MapWithHooks is a React component. Map is the story. So, you could type it like so:

export default {
  title: 'Components/Atoms/Map',
  component: MapComponent,
  args: props,
} as Meta<typeof MapComponent>;

const MapWithHooks = (args: React.ComponentProps<typeof MapComponent>) => {
  const dispatch = useAppDispatch();

  dispatch(
    setOrganisation({
      ...
    })
  );

  return <MapComponent {...args} />;
};

export const Map: StoryObj<typeof MapComponent> = {
  render: (args) => <MapWithHooks {...args} />,
};

[viral knoll]

I went ahead and submitted a PR to add that TS example, too: https://github.com/storybookjs/storybook/pull/22149