typescript - 在 next-connect 中间件中覆盖请求类型

Question

我正在使用 next-connect 和 next.js & typescript，我想创建一个中间件，它向请求对象添加一些字段并推断新的请求类型。代码如下:

// multipart middleware
export type NextApiRequestMultipart = NextApiRequest & {
  files: Files;
  fields: Fields;
};
export function multipart(
  config?: Options
) {
  return async (
    req: NextApiRequest,
    res: NextApiResponse,
    next: NextHandler
  ) => {
    const { files, fields } = await parseForm(req, config);
    (req as NextApiRequestMultipart).files = files;
    (req as NextApiRequestMultipart).fields = fields;
    return next();
  };
}

export router().post(
  multipart({ multiples: false }),
  async (req, res) => {
    // I want to access properties without statically typing the request
    const { files, fields } = req;
  }
);

StackBlitz repo :see code

Answer 1

我设法实现了示例解决方案。这是代码演示: stakc-blitz modified

方法的示例描述

我还没有测试过，但我想展示一下这个方法。

我们需要一个 Controller 路由器构建器来做到这一点。并且这个 Controller 构建器需要将添加的类型“堆叠”到所有中间件的 Request 对象。

一个例子

class ControllerBuilder<RequestType> {
   addMiddleWare(middleWare): ControllerBuilder<RequestType & middlewareTypeAdditions> {
   // implementation
 }
}

为了提取中间件类型——我需要用某种方式声明它。这就是我引入装饰中间件的原因。

下面是 Decorate 中间件的抽象:

abstract class DecoratedMiddleware<MiddlewareReqTypeAdditions> {
  ///
}

现在在 ControllerBuilder 中我们可以“提取”每个中间件的类型并通过返回具有 unin 类型的新实例“堆叠”它们:ReqeustType 到目前为止与新中间件将添加的添加相结合

class ControllerBuilder<RequestType> {
   addMiddleWare(middleWare: DecoratedMiddleware<MiddlewareReqTypeAdditions>): ControllerBuilder<RequestType & MiddlewareReqTypeAdditions> {
   // implementation
   return new ControllerBuilder<>
 }
}

这是一个示例中间件实现。我们只需要声明构建器将设置的请求的附加属性。流程函数必须返回这些 Prop 的 promise ，确保根据中间件类型契约(Contract)设置所有内容。

type AuthRequestAddtion = {
  role: string;
  id: number | string;
  hotelId: number;
};

class AuthMiddleware extends DecoratedMiddleware<AuthRequestAddtion> {
  protected process: MuddlewareFunc<AuthRequestAddtion> = (req, res) => {
    return Promise.resolve({
      id: 1,
      role: 'GUEST',
      hotelId: 3,
    });
  };
}

最后是示例用法:

ControllerBuilder.get(router(), '/with-weather')
  .addMiddleware(authMiddleware)
  .addMiddleware(multipartMiddleware)
  .addMiddleware(weatherMiddleware)
  .handle(async (req, res) => {
    //now we have types for all the middlewares
    const hotelId = req.hotelId;
    const files = req.files;
    const temp = req.weather.temperature;
    res.status(200).json({ hotelId, files, temp });
  });

构建器并未 100% 完成，我的目的是展示方法。我可能会修改它，以便可以使用一组中间件。

请注意，在调用 handle 之前，它的行为与 Builder 相同。所以它是不可变的，可以链接并重用结果

像这样:

const authUserWithWeather = ControllerBuilder.create()
  .addMiddleware(authMiddleware)
  .addMiddleware(weatherMiddleware);


authUserWithWeather.get("/").handle(() => {});
authUserWithWeather
  .addMiddleware(multipartMiddleware)
  .get("/something")
  .handle(() => {})

再次链接到演示:stakc-blitz modified