TypeScript扩展Express Response.render类型定义报错如何解决

API 探路者

2026-9-29

错误原因

你遇到的类型不兼容报错是因为原生Response.render存在2个重载签名，你自定义的render只覆盖了1种参数场景，且没有兼容原生支持的「第二个参数直接传回调函数」的用法，导致继承时类型匹配失败。

解决方案

方案1：继承时补全重载签名（局部自定义Response类型）

如果你只需要在产品列表相关路由用这个强类型Response，直接给自定义接口补全原生的重载规则即可，把你要的强类型重载放在最前面保证优先级更高：

import { Response } from "express";
import { Product } from "../models/Product.interface";

export interface ProductListResponse extends Response {
  // 强类型重载，调用时会优先匹配这个规则校验options格式
  render(view: string, options?: { products: Product[] }, callback?: (err: Error, html: string) => void): void;
  // 兼容原生第二个参数为回调的重载
  render(view: string, callback?: (err: Error, html: string) => void): void;
}

使用时在路由里指定res的类型即可：

app.get('/products', (req, res: ProductListResponse) => {
  // 此处会自动校验options的products属性类型
  res.render('product-list', { products: [] })
})

方案2：全局扩展Express Response类型

如果需要所有路由的render都支持products的类型校验，可以通过类型声明合并直接扩展Express的全局Response类型：

项目根目录新建express.d.ts类型声明文件
写入以下内容：

import { Product } from "./models/Product.interface";

declare global {
  namespace Express {
    interface Response {
      render(view: string, options?: { products?: Product[] } & Record<string, any>, callback?: (err: Error, html: string) => void): void;
      render(view: string, callback?: (err: Error, html: string) => void): void;
    }
  }
}