Good day pare, Today while I'm doing our next tutorial regarding with our screen capture api I encountered few errors after upgrading my express and ts-node to their latest version.
If you miss out our last tutorial with regards on how i structure my node & express rest api, please check this link - A Better Structure for NodeJS & Express REST API with Typescript
While creating a new node and express template using typescript once you add a new middleware something like this below
// Middleware that transforms the raw string of req.body into json
app.use(express.urlencoded({extended: true}));
app.use(express.json());
My VS Code shown this error:
Error: ⚠️
Take note this error message "Type 'NextHandleFunction' is missing the following properties from type '(string | RegExp)[]': pop, push, concat, join, and 25 more."
$ nodemon
[nodemon] 2.0.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): src/**/*
[nodemon] watching extensions: ts,html
[nodemon] starting `./node_modules/.bin/ts-node -r tsconfig-paths/register ./src`
(node:36899) UnhandledPromiseRejectionWarning: TSError: ⨯ Unable to compile TypeScript:
src/loaders/express.ts:33:11 - error TS2769: No overload matches this call.
The last overload gave the following error.
Argument of type 'NextHandleFunction' is not assignable to parameter of type 'PathParams'.
Type 'NextHandleFunction' is missing the following properties from type '(string | RegExp)[]': pop, push, concat, join, and 25 more.
33 app.use(express.urlencoded({extended: true}));
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/express-serve-static-core/index.d.ts:114:5
114 <
~
115 P = ParamsDictionary,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...
123 ...handlers: Array<RequestHandlerParams<P, ResBody, ReqBody, ReqQuery, Locals>>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
124 ): T;
~~~~~~~~~
......
Answer: 👍
To fix this issue, I added express "RequestHandler" type assertion which means, the compiler will assume those middleware has all the type as RequestHandler.
Our new code should be like this below
// import RequestHandler at the top
import express, { RequestHandler} from 'express';
// Middleware that transforms the raw string of req.body into json
app.use(express.urlencoded({extended: true}) as RequestHandler);
app.use(express.json() as RequestHandler);
And Tadaaa... it should work again..
Voila!!!
I hope you enjoy our tutorial, Let me know incase you encounter any error I would love to answer that. Don't forget to subscribe to my Youtube Channel at Let's Code Pare - Youtube Channel
