Why my enum type wont work in Next.js project

Question

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..

Answer 1

'left' and 'right' are not type or enum type in imageSide: 'left' | 'right' 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
 },
];

Answer 2

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
}