“NextHandleFunction”类型的参数不可分配给“PathParams”类型的参数

Question

我已经在基本的 Express 服务器上启动并运行了 TypeScript，但我遇到了问题。

import bodyParser from 'body-parser';
import express, { Express } from 'express';

const app: Express = express();
app.use(bodyParser.json()); // Error 1
app.use(bodyParser.urlencoded({ extended: true })); // Error 2

错误1是这样的：

“NextHandleFunction”类型中缺少属性“pop”。 [2345]

因此

bodyParser.json()

返回

createServer.NextHandleFunction

但没有

pop

属性。

NextHandleFunction

的定义如下

@types/connect

:

export type NextHandleFunction = (req: http.IncomingMessage, res: http.ServerResponse, next: NextFunction) => void;

是的，不

pop

。但我有什么办法可以解决这个问题？

错误2是这样的：

类型“NextHandleFunction”不可分配给类型“(string | RegExp)[]”。 [2345]

在这里，

bodyParser.urlencoded()

也返回一个

createServer.NextHandleFunction

，但这不是

app.use()

正在寻找的类型。

再次不确定我的选择。

package.json

"dependencies": {
    "@types/body-parser": "^1.17.0",
    "@types/connect": "^3.4.32",
    "@types/express": "^4.16.0",
    "@types/express-serve-static-core": "^4.16.0",
    "body-parser": "^1.18.3",
    "express": "^4.15.2",
    "express-serve-static-core": "^0.1.1"
},
"devDependencies": {
    "typescript": "^3.1.6"
}

Answer 1

我能够通过这种方式修复错误：

import bodyParser from 'body-parser';
import express, { Express, RequestHandler } from 'express';

const app: Express = express();
app.use(bodyParser.json() as RequestHandler);
app.use(bodyParser.urlencoded({ extended: true }) as RequestHandler);

Answer 2

您不必像其他答案中所建议的那样强制转换中间件。 我相信次要的

@types/*

软件包版本之间可能存在一些不兼容性。 在删除一些类型包依赖项、删除

node_modules/@types

并显式安装

@types/express

、

@types/express-serve-static-core

和

@types/cookie-parser

（你可能不需要那个）之后，我最终得到了（除其他外）

        "@types/cookie-parser": "^1.4.2",
        "@types/cors": "^2.8.10",
        "@types/express": "^4.17.12",
        "@types/express-serve-static-core": "^4.17.21",

我现在可以写字了

import {json, urlencoded} from "express";

...

app.use(urlencoded({extended: false}));

...

app.post("./", json(), this.doPost.bind(this));

这些类型检查无需显式强制转换。 我不确定旧包到底出了什么问题，或者是否存在某种传递性 de-dupe 选择了错误的组合，但上面的版本似乎可以正确地协同工作。

Answer 3

删除 @types/express 和 @types/express-serve-static-core 帮助我摆脱了这些错误，默认情况下类型也捆绑在express中。因此，请毫不犹豫地删除它们。此外，您不再需要 body-parser，因为 json 和 url 编码的中间件捆绑在 Express it-self 中。

Answer 4

在 app.ts 中添加如下导入语句。

import express, { RequestHandler } from 'express';

还要更改express.json()和express.urlencoded({extend: true})如下。

this.app.use(express.json() as RequestHandler);
this.app.use(express.urlencoded({ extended: true }) as RequestHandler);

Answer 5

我的这行代码也遇到了类似的问题：

import express from "express"
import compression from "compression"
import passport from "passport"

const server = express()

//TYPESCRIPT ERROR: Argument of type 'RequestHandler<ParamsDictionary, any, //any, ParsedQs, Record<string, any>>' is not assignable to parameter of type //'PathParams'
server.use(compression())

//TYPESCRIPT ERROR:Argument of type 'Handler' is not assignable to parameter //of type 'PathParams'.
server.use(passport.initialize())

在我的 package.json 上，我有

devDependencies

:

"@types/express": "^4.17.21",
"@types/compression": "^1.7.5",
"@types/passport": "^1.0.16"

我刚刚删除了

"@types/express": "^4.17.21"

行并使用yarn再次安装。它附带了新版本^5.0.0并解决了错误。