Storybook v8 and Angular v18 render function type error

I have a set of stories for a component in Storybook 8 and Angular 18 that show a type error when the component includes an EventEmitter. For example:

class MyComponent {
@Output() someEvent = new EventEmitter<any>();
// other properties and methods
}


And a simple story like:

export default meta;
type Story = StoryObj<MyComponent>;

export const Basic: Story = {
render: (args: MyComponent) => ({
props: {
...args,
},
}),
args: {},
};


Both in my IDE (VS Code) and when running in the browser I get a type error and can't run my stories. The error is seemingly unhelpful just stating that there is a type mismatch (FYI, store is a service on my component):

Type '(args: MyComponent) => { props: { someEvent: EventEmitter<...>; }; }' is not assignable to type 'ArgsStoryFn<AngularRenderer, TransformInputSignalType<TransformOutputSignalType<TransformEventType>>>'. Types of parameters 'args' and 'args' are incompatible. Type 'TransformInputSignalType<TransformOutputSignalType<TransformEventType>>' is missing the following properties from type 'MyComponent': store
​

If I remove any @Output EventEmitters the issue goes away, but as you can imagine I need those emitters for my component to work.

I stumbled upon a workaround whereby I change the StoryObj type to 'any' like this:

export default meta;
type Story = StoryObj<any>;

export const Basic: Story = {
render: (args: MyComponent) => ({
props: {
...args,
},
}),
args: {},
};


However, this doesn't seem right and I suspect I'm just doing something wrong.

Continue reading...