Express TS中RequestHandler类型报错，如何定义req参数类型？

问题原因 #

你遇到的类型错误核心是：UpdateNoteParams接口未符合Express内置ParamsDictionary的类型要求——ParamsDictionary默认带有字符串索引签名（{ [key: string]: string | undefined }），而你的自定义接口仅定义了noteId字段，缺少该索引签名，导致类型不兼容。此外，你显式给req参数标注了默认的Request类型（对应Request<ParamsDictionary, ...>），和RequestHandler泛型指定的Request<UpdateNoteParams, ...>冲突，加剧了类型不匹配。

解决方案 #

方案1：让自定义Params接口兼容ParamsDictionary

给UpdateNoteParams添加字符串索引签名，或直接继承ParamsDictionary：

import { ParamsDictionary } from 'express';

// 方式1：继承ParamsDictionary
interface UpdateNoteParams extends ParamsDictionary {
    noteId: string;
}

// 方式2：直接添加索引签名
interface UpdateNoteParams {
    noteId: string;
    [key: string]: string | undefined;
}

方案2：去掉参数的显式类型标注（推荐）

RequestHandler的泛型会自动推导req、res等参数的类型，无需再给参数显式标注Request/Response类型，既能避免类型冲突，又能获得正确的类型提示：

import { RequestHandler } from 'express';

interface UpdateNoteParams {
    noteId: string;
}

interface UpdateNoteBody {
    title?: string;
    text?: string;
}

export const updateNote: RequestHandler<UpdateNoteParams, unknown, UpdateNoteBody, unknown> = async (req, res, next) => {
    // req.params自动为UpdateNoteParams类型，req.body自动为UpdateNoteBody类型
    const { noteId } = req.params;
    const { title, text } = req.body;
    
    // 业务逻辑代码示例
    res.status(200).json({ success: true, noteId, updatedTitle: title, updatedText: text });
};

方案3：显式标注参数的泛型Request类型

若一定要给参数标注类型，需使用和RequestHandler一致的泛型Request：

import { Request, Response, NextFunction, RequestHandler, ParamsDictionary } from 'express';

interface UpdateNoteParams extends ParamsDictionary {
    noteId: string;
}

interface UpdateNoteBody {
    title?: string;
    text?: string;
}

export const updateNote: RequestHandler<UpdateNoteParams, unknown, UpdateNoteBody, unknown> = async (
    req: Request<UpdateNoteParams, unknown, UpdateNoteBody, unknown>,
    res: Response,
    next: NextFunction
) => {
    // 业务逻辑代码
};

总结 #

最简洁且不易出错的方式是方案2——依赖RequestHandler的泛型自动推导参数类型，既省去重复标注的麻烦，也能保证类型完全匹配。

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