I have these types:
export enum LayersItemOptionsEnum {
OPERATOR,
HEADER,
}
type sharedTypes = {
children: string | ReactElement;
};
type LayersItemStatic = sharedTypes & {
label: string;
option: LayersItemOptionsEnum;
};
type LayersItemDynamic = sharedTypes & {
currentLayer: LayersElement;
};
export type LayersItemProps = (LayersItemDynamic | LayersItemStatic) & sharedTypes;
I am trying to use them like so:
export const LayersItem: FC<LayersItemProps> = (props): ReactElement => {
const isHeader = props.option === LayersItemOptionsEnum.HEADER;
const { isInEditMode } = useAppSelector((state) => state.editMode);
const shouldRenderOptions = isInEditMode && !isHeader;
const { selectedState } = useAppSelector((state) => state);
const states = useAppSelector((state) => state.statesData.elements);
return (
<StyledLayersItem header={isHeader}>
<Row>
<Col span={8} offset={1 /* todo: add offset dynamically */}>
<h1>{props.label ? props.label : props.currentLayer.name}</h1>
</Col>
<Col span={8} offset={4}>
{shouldRenderOptions ? (
<Form.Item className="form-item" initialValue={props.children}>
<Select>
{generateOptions({ selectedState, states, props.currentLayer }).map((value) => {
return (
<Select.Option value={value.id} key={value.id}>
{value.name}
</Select.Option>
);
})}
</Select>
</Form.Item>
) : (
<>{props.children}</>
)}
</Col>
</Row>
</StyledLayersItem>
);
};
But I am getting the errors like this one:
Property 'label' does not exist on type 'PropsWithChildren<LayersItemProps>'.
Property 'label' does not exist on type 'sharedTypes & { currentLayer: LayersElement; } & { children?: ReactNode; }'.
For each of the props.
apart from props.children
. Like it doesn't see the union in types. Or am I misunderstanding something?
Basically, if the props have label
, or option
, I want props
to be of type LayersItemStatic & shared Types
, and if there is currentLayer
in props
, I want them to be of type LayersItemDynamic & sharedTypes
.
So what am I missing here?
I am trying to achieve something like this:
type SharedType = SharedDisplayAndEditTypes & {
required?: boolean;
validationMessage: string;
name: string;
};
type TextType = {
type: 'text';
children: string;
};
type NumberType = {
type: 'number';
children: number;
};
type InputType = TextType | NumberType;
type DropdownType = {
type: 'dropdown';
options: string[];
children: string;
};
type ColorType = {
type: 'color';
defaultValue: string;
};
export type DetailsItemEditProps = (DropdownType | InputType | ColorType) & SharedType;