枚举类型在 Next.js 项目中不起作用解决方式

  • Z时代
  • 2024-01-10
  • 分类：综合

在 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
 },
];

本文转载自：迹忆客（https://www.jiyik.com）

以上是 枚举类型在 Next.js 项目中不起作用解决方式 的全部内容， 来源链接： utcz.com/z/290292.html

回到顶部