TS项目使用next-connect报TS2339错误：ServerResponse无status属性如何修复类型

• 该问题和React没有关联，安装React类型依赖无法解决报错
• next-connect 默认会把请求、响应对象推断为Node.js原生http模块的IncomingMessage和ServerResponse类型，原生ServerResponse本身不存在Express风格的status()、json()方法，因此触发TS2339报错

1. 安装匹配的类型依赖 #

仅需要安装multer对应的TS类型，不需要安装无关的React类型：
npm install -D @types/multer
next-connect v1.0及以上版本自带完整TS类型支持，无需额外安装类型包

2. 为next-connect实例显式指定正确的泛型 #

从Next.js中导入API路由专属的类型定义，扩展适配multer的请求类型，给nc() 方法传入对应泛型，覆盖默认的原生Node类型推导：

import multer from 'multer';
import nc from "next-connect";
// 导入Next.js内置的API路由类型
import type { NextApiRequest, NextApiResponse } from 'next';

// 扩展请求类型，适配multer挂载的文件列表属性
interface MulterNextRequest extends NextApiRequest {
  files: Express.Multer.File[];
}

const upload = multer({
  storage: multer.diskStorage({
    destination: './public/uploads',
    filename: (req, file, cb) => cb(null, file.originalname),
  }),
});

// 传入自定义泛型，替换默认的类型推导结果
const apiRoute = nc<MulterNextRequest, NextApiResponse>({
  onError(error, req, res) {
    res.status(501).json({ error: `Sorry something Happened! ${error.message}` });
  },
  onNoMatch(req, res) {
    res.status(405).json({ error: `Method '${req.method}' Not Allowed` });
  },
});

apiRoute.use(upload.array('theFiles'));

apiRoute.post((req, res) => {
  // 此处res会被正确推断为带status、json方法的NextApiResponse类型
  res.status(200).json({ data: 'success' });
});

export default apiRoute;

export const config = {
  api: {
    bodyParser: false, // Disallow body parsing, consume as stream
  },
};

3. 修复方案说明 #

• 传入泛型后，所有路由处理、错误回调中的res 对象都会被自动识别为NextApiResponse 类型，该类型本身就内置了.status()、.json() 等方法的类型定义，直接消除TS2339报错
• 扩展的请求类型也能避免后续访问req.files 时的类型报错
• 不推荐全局重写ServerResponse 类型的修复方式，这类方式侵入性强，容易和项目内其他依赖的类型推导产生冲突，局部指定nc的泛型是最稳妥的方案

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