Next.js项目中TypeScript map返回值类型不匹配问题的修正方法

你这里的类型错误出在元组和数组的混淆：

• 你写的[{ id: string; fullpath: string }]是元组类型，要求变量必须是一个仅包含一个元素的数组，元素结构符合定义。
• 但fileNames.map()返回的是一个长度不确定的数组（类型为{ id: string; fullpath: string }[]），所以TypeScript会报错类型不匹配。

正确的类型定义方式 #

方式1：直接使用数组类型 #

把元组的方括号内的结构移到方括号外，明确表示这是一个元素为指定结构的数组：

const allImagesData: { id: string; fullpath: string }[] = fileNames.map(
  (fileName): { id: string; fullpath: string } => {
    const id = fileName;
    const fullpath = "/testimgs/" + fileName;

    return {
      id,
      fullpath,
    };
  }
);

方式2：使用Array泛型 #

和方式1等价，写法更清晰：

const allImagesData: Array<{ id: string; fullpath: string }> = fileNames.map(
  (fileName): { id: string; fullpath: string } => {
    const id = fileName;
    const fullpath = "/testimgs/" + fileName;

    return {
      id,
      fullpath,
    };
  }
);

方式3：定义类型别名/接口（推荐） #

如果这个结构会重复使用，先定义一个类型别名或接口，代码可读性更好：

// 定义类型别名
type ImageData = {
  id: string;
  fullpath: string;
};

// 或者用接口
// interface ImageData {
//   id: string;
//   fullpath: string;
// }

const allImagesData: ImageData[] = fileNames.map(
  (fileName): ImageData => {
    const id = fileName;
    const fullpath = "/testimgs/" + fileName;

    return {
      id,
      fullpath,
    };
  }
);

另外，其实TypeScript可以自动推导map返回的类型，如果你不需要显式标注，甚至可以省略: ImageData[]，让TS自动推断，代码更简洁。

内容的提问来源于stack exchange，提问作者shawhu