迹忆客 专注技术分享

在 Next.js 项目中出现过 "Type 'string' is not assignable to type '"left" | "right"'." 的错误。

在 Next.js 上运行的项目，下面是类型定义

export interface TwoColumnsBlueWhite {
  title: String;
  subTitle: String;
  content: JSX.Element;
  links: string[];
  imageSide: 'left' | 'right'
}

下面是我的 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}
        />
      ))}

如果我们改变对 imageSide 的定义：'left'| 'right' | string。其实是可以正常工作的，但是我们想使用严格(strict)模式。

'left' 和 'right' 不是 imageSide 中的类型或枚举类型：'left' | 'right'。因此，一种解决方案可能是首先定义枚举类型，如下所示，

export enum ISide {
   LEFT = 'left',
   RIGHT = 'right'
}

然后，在需要时使用它，

export interface TwoColumnsBlueWhite {
  title: String;
  subTitle: String;
  content: JSX.Element;
  links: string[];
  imageSide: ISide.LEFT | ISide.RIGHT           // <--- 导入ISide 并且在这里使用
}

并且修改如下代码

const data = [
{ title: 'some'
  ...
  imageSide: ISide.LEFT
 },
{ title: 'some'
  ...
  imageSide: ISide.RIGHT
 },
];