如何消除NextJS TypeScript API代码中的红色波浪线

以下是针对你代码中红色波浪线的具体修复方案：

问题分析 #

红色波浪线主要来自三个TypeScript类型校验问题：

• 请求体req.body未定义类型，解构prompt和size时TS无法推断其类型
• catch块中error为unknown类型，直接访问response/message属性不符合TS类型规则
• 定义的Data类型与实际返回的响应结构不匹配（成功响应缺少prompt字段，失败响应缺少data字段）

修复代码 #

// 定义请求体的类型
type GenerateImageRequest = {
  prompt: string;
  size?: "Small" | "Medium" | "Large";
};

// 定义响应的联合类型，更贴合实际返回结构
type SuccessResponse = {
  success: true;
  data: string;
};

type ErrorResponse = {
  success: false;
  error: string;
};

type Data = SuccessResponse | ErrorResponse;

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  // 给请求体断言为定义好的类型，同时设置size默认值
  const { prompt, size = "Large" } = req.body as GenerateImageRequest;

  const imageSize = size === "Small" ? "256x256" : size === "Medium" ? "512x512" : "1024x1024";

  try {
    const response = await openai.createImage({
      prompt,
      n: 1,
      size: imageSize,
    });

    const imageUrl = response.data.data[0].url;

    res.status(200).json({
      success: true,
      data: imageUrl,
    });
  } catch (error) {
    // 通过类型守卫处理unknown类型的error
    if (typeof error === 'object' && error !== null && 'response' in error) {
      const apiError = error as { response: { status: number; data: unknown } };
      console.log(apiError.response.status);
      console.log(apiError.response.data);
    } else if (error instanceof Error) {
      console.log(error.message);
    } else {
      console.log(String(error));
    }

    res.status(400).json({
      success: false,
      error: "The image could not be generated",
    });
  }
}

关键修改说明 #

1. 新增请求体类型：定义GenerateImageRequest明确req.body的结构，通过类型断言告诉TS请求体的类型，解决解构时的类型报错
2. 优化响应类型：用联合类型SuccessResponse | ErrorResponse替代原Data类型，让响应结构与实际返回完全匹配，避免字段缺失的报错
3. 处理unknown类型的错误：通过类型守卫判断error的实际类型，安全访问response或message属性，符合TS的类型校验规则

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