Default export CSF 'component' typing for class component

[dmarcautan]

Describe the bug
Typescript will error on the following block when MyComponent is defined as class component:
export default { title: "MyComponents/MyComponent", component: MyComponent, } as Meta;

'component' property typed with:
type ReactComponent = Component | FunctionComponent<any>;

'Component' is instance type definition but 'FunctionComponent' is functional component TYPE.

[shilman]

'Component' is instance type definition but 'FunctionComponent' is functional component TYPE.

Can you elaborate on this?

[dmarcautan]

'Component' is instance type definition but 'FunctionComponent' is functional component TYPE.

Can you elaborate on this?

@shilman
Consider the fragment:

class MyComponent extends Component {

}

export default {
	title: "Controls/MyComponent",
	component: MyComponent,
  } as Meta;

Casting default export as Meta will generate TS compilation error here because 'component' field expects Component implementation. MyComponent is constructor function and doesn't implement Component but is actually an implementation of ComponentClass. We can fix the error if we provide 'component' field with new MyComponent({}) but I assumed the field should be provided with component type ( as defined in React typings: type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>). Or do I miss the point?

[shilman]

@dmarcautan I think you're right. I pretty much only ever use FC, so I didn't know about ComponentClass. Will fix!

[shilman]

Ooh-la-la!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.12 containing PR #12072 that references this issue. Upgrade today to try it out!

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.15 containing PR #12110 that references this issue. Upgrade today to try it out!