在Next.js+TypeScript中用next-connect中间件扩展并推导请求类型

要让TypeScript自动识别中间件扩展后的请求类型，无需手动断言，关键是给中间件添加正确的类型声明，让next-connect的类型系统能追踪请求类型的变化。

步骤1：完善中间件的类型定义 #

修改你的multipart中间件，明确它会将基础NextApiRequest扩展为NextApiRequestMultipart，并使用next-connect的Middleware泛型来声明类型变化：

import type { NextApiRequest, NextApiResponse } from 'next';
import type { Middleware, NextHandler } from 'next-connect';

// 替换为你实际的Files和Fields类型定义
type Files = Record<string, any>;
type Fields = Record<string, any>;
type Options = { multiples?: boolean };

// 扩展后的请求类型
export type NextApiRequestMultipart = NextApiRequest & {
  files: Files;
  fields: Fields;
};

// 声明中间件返回类型，告知TS该中间件会扩展请求类型
export function multipart(config?: Options): Middleware<NextApiRequest, NextApiResponse, NextApiRequestMultipart> {
  return async (req, res, next) => {
    const { files, fields } = await parseForm(req, config);
    
    // 这里的类型断言仅用于运行时类型兼容，类型层面已通过Middleware泛型声明
    (req as NextApiRequestMultipart).files = files;
    (req as NextApiRequestMultipart).fields = fields;
    
    return next();
  };
}

步骤2：使用中间件并自动推导类型 #

确保你的router基于基础的NextApiRequest和NextApiResponse创建，添加中间件后，后续的handler会自动获取扩展后的请求类型：

import { router } from './lib/router';

export default router().post(
  multipart({ multiples: false }),
  async (req, res) => {
    // req自动推导为NextApiRequestMultipart，无需手动断言
    const { files, fields } = req;
    
    res.status(200).json({ success: true, files, fields });
  }
);

关键说明 #

• next-connect的Middleware泛型第三个参数用于声明中间件处理后请求对象的类型，类型系统会自动将这个类型传递给后续的handler。
• 确保你的router初始泛型为NextApiRequest和NextApiResponse，比如用createRouter<NextApiRequest, NextApiResponse>()创建，这样中间件的类型扩展才能被正确累积。

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