I getting this error "Type 'string' is not assignable to type '"left" | "right"'."
Project running on Next.js
Here is my type definiton
export interface TwoColumnsBlueWhite {
title: String;
subTitle: String;
content: JSX.Element;
links: string[];
imageSide: 'left' | 'right'
}
This is my array with map.
const data = [
{ title: 'some'
...
imageSide: 'left'
},
{ title: 'some'
...
imageSide: 'right'
},
];
<Carousel />
{data.map((data) => (
<TwoColumnsBlueWhite
title={data.title}
subTitle={data.subTitle}
content={data.content}
links={data.links}
imageSide={data.imageSide}
/>
))}
I try it
Put manualy in props 'left' or 'right' in props, then work but i need this component map.
if i change my definiton on imageSide: 'left' | 'right' | string
then work to, but i would like use strict typing..
'left' and 'right' are not type or enum type in imageSide: 'left' | 'right'.
One solution could be that you define the enum type first as shown below,
export enum ISide {
LEFT = 'left',
RIGHT = 'right'
}
Then, use it whenever required,
export interface TwoColumnsBlueWhite {
title: String;
subTitle: String;
content: JSX.Element;
links: string[];
imageSide: ISide.LEFT | ISide.RIGHT // <--- import ISide and use it here as shown
}
also,
const data = [
{ title: 'some'
...
imageSide: ISide.LEFT // <---- check this
},
{ title: 'some'
...
imageSide: ISide.RIGHT // <---- check this
},
];
I do something similar to the other answer but cast it as a const. It prevents widening and having to set which options you allow explicitly.
const OPTIONS = {
LEFT = 'left',
RIGHT = 'right'
} as const;
type TImageSlide = typeof OPTIONS[keyof typeof OPTIONS];
export interface TwoColumnsBlueWhite {
imageSide: TImageSlide,
...other options
}