I have developed a unique Factory type that allows me to create factory functions.
export type Factory<T> = (state?: Partial<T>) => T;
Within my <Avatar /> React component, I have implemented a prop with a union type to accommodate for two versions of the avatar (standalone image or clickable image). This means that the component can accept either set of props.
type AvatarOnlyProps = {
alt: string;
src: string;
};
type ClickableAvatarProps = {
alt: string;
label: string;
onClick:
| ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)
| undefined;
src: string;
};
export type AvatarProps = AvatarOnlyProps | ClickableAvatarProps;
My goal is to create a factory function for the avatar's props. While attempting to define it, I encountered an issue:
const createProps: Factory<AvatarProps> = ({
alt = 'Your avatar',
label,
onClick,
src: source = '/images/default-avatar.png',
} = {}) => ({ alt, label, onClick, src: source });
However, TypeScript raises an error:
Property 'label' does not exist on type 'Partial<AvatarOnlyProps> | Partial<ClickableAvatarProps>'.
This error occurs in the arguments section of the factory function.
https://i.stack.imgur.com/xvf1v.png
How can this error be resolved? Is there a way to make TypeScript understand that both onClick and label must either be provided or neither?