Closed
Description
openedon Jul 27, 2023
Describe the bug
The snippet below gives a TypeScript error. If I were to change the meta type to Meta<typeof TestButton> it would work as expected.
To Reproduce
import type { MouseEvent } from 'react';
import type { Meta } from '@storybook/react';
type TestButtonProps = {
text: string;
} & (
| {
id?: string;
onClick?: (e: MouseEvent<HTMLButtonElement>, id: string | undefined) => void;
}
| {
id: string;
onClick: (e: MouseEvent<HTMLButtonElement>, id: string) => void;
}
);
const TestButton: React.FC<TestButtonProps> = ({ text }) => {
return <p>{text}</p>;
};
const meta: Meta<TestButtonProps> = {
title: 'Components/Button',
component: TestButton,
args: {
text: 'Button',
},
};
export default meta;This gives the followign error:
src/ui/components/Button/stories/Demo.stories.tsx:22:5 - error TS2322: Type 'FC<TestButtonProps>' is not assignable to type 'ComponentType<{ text: string; } & { id?: string | undefined; onClick?: ((e: M
ouseEvent<HTMLButtonElement, MouseEvent>, id: string | undefined) => void) | undefined; }> | ComponentType<...> | undefined'.
Type 'FunctionComponent<TestButtonProps>' is not assignable to type 'FunctionComponent<{ text: string; } & { id?: string | undefined; onClick?: ((e: MouseEvent<HTMLButtonElement, MouseEvent>, id: stri
ng | undefined) => void) | undefined; }>'.
Types of property 'propTypes' are incompatible.
Type 'WeakValidationMap<TestButtonProps> | undefined' is not assignable to type 'WeakValidationMap<{ text: string; } & { id?: string | undefined; onClick?: ((e: MouseEvent<HTMLButtonElement, Mouse
Event>, id: string | undefined) => void) | undefined; }> | undefined'.
Type 'WeakValidationMap<{ text: string; } & { id: string; onClick: (e: MouseEvent<HTMLButtonElement, MouseEvent>, id: string) => void; }>' is not assignable to type 'WeakValidationMap<{ text: st
ring; } & { id?: string | undefined; onClick?: ((e: MouseEvent<HTMLButtonElement, MouseEvent>, id: string | undefined) => void) | undefined; }>'.
Types of property 'onClick' are incompatible.
Type 'Validator<(e: MouseEvent<HTMLButtonElement, MouseEvent>, id: string) => void> | undefined' is not assignable to type 'Validator<((e: MouseEvent<HTMLButtonElement, MouseEvent>, id: stri
ng | undefined) => void) | null | undefined> | undefined'.
Type 'Validator<(e: MouseEvent<HTMLButtonElement, MouseEvent>, id: string) => void>' is not assignable to type 'Validator<((e: MouseEvent<HTMLButtonElement, MouseEvent>, id: string | undef
ined) => void) | null | undefined>'.
Type '(e: MouseEvent<HTMLButtonElement, MouseEvent>, id: string) => void' is not assignable to type '(e: MouseEvent<HTMLButtonElement, MouseEvent>, id: string | undefined) => void'.
Types of parameters 'id' and 'id' are incompatible.
ined) => void) | null | undefined>'.
Type '(e: MouseEvent<HTMLButtonElement, MouseEvent>, id: string) => void' is not assignable to type '(e: MouseEvent<HTMLButtonElement, MouseEvent>, id: string | undefined) => void'.
Types of parameters 'id' and 'id' are incompatible.
Type 'string | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.
22 component: TestButton,
~~~~~~~~~
node_modules/@storybook/types/dist/index.d.ts:1221:5
1221 component?: (TRenderer & {
~~~~~~~~~
The expected type comes from property 'component' which is declared here on type 'ComponentAnnotations<ReactRenderer, { text: string; } & { id?: string | undefined; onClick?: ((e: MouseEvent<HTMLBut
tonElement, MouseEvent>, id: string | undefined) => void) | undefined; }> | ComponentAnnotations<...>'
System
System:
OS: Windows 10 10.0.19044
CPU: (8) x64 Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz
Binaries:
Node: 16.16.0 - C:\SPU\tools\node-v16.16.0-win-x64\node.EXE
Yarn: 1.22.19 - C:\SPU\web\tools\nodejs_16.16.0\yarn.CMD
npm: 8.11.0 - C:\SPU\tools\node-v16.16.0-win-x64\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (115.0.1901.183)
npmPackages:
@storybook/addon-a11y: ^7.0.24 => 7.0.24
@storybook/addon-actions: ^7.0.24 => 7.0.24
@storybook/addon-essentials: ^7.0.24 => 7.0.24
@storybook/addon-links: ^7.0.24 => 7.0.24
@storybook/addons: ^7.0.24 => 7.0.24
@storybook/react: ^7.0.24 => 7.0.24
@storybook/react-webpack5: ^7.0.24 => 7.0.24
@storybook/theming: ^7.0.24 => 7.0.24Additional context
Error occurs with "storybook": "^7.0.24" and both typescript versions:
"typescript": "^5.1.6",
"typescript": "^4.8.3",
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Metadata
Assignees
Type
Projects
Status
Done