Typescript Error: Property 'user' does not exist on type 'Request'
node.jsTypescriptnode.js Problem Overview
I have the following piece of code in my express app
router.get('/auth/userInfo', this.validateUser, (req, res) => {
res.json(req.user);
});
and my IDE seems to be complaining with the error
> error TS2339: Property 'user' does not exist on type 'Request'.
When I compile my typescript code it seems to be throwing this error. Any ideas why this is happening?
node.js Solutions
Solution 1 - node.js
We have a large API written in Express and Typescript, and this is how we handle such scenarios:
We keep the request definitions in one file:
import { Request } from "express"
export interface IGetUserAuthInfoRequest extends Request {
user: string // or any other type
}
And then in the file where we are writing the controller functions:
import { Response } from "express"
import { IGetUserAuthInfoRequest } from "./definitionfile"
app.get('/auth/userInfo', validateUser, (req: IGetUserAuthInfoRequest, res: Response) => {
res.status(200).json(req.user); // Start calling status function to be compliant with Express 5.0
});
Be advised that "user" is not a property that is available natively in the Request object of Express. Make sure that you are using a middleware that adds such property to the request object.
Solution 2 - node.js
req is probably of type Request from "express" package and user does not exist there. You have to either extend Request with own router handler or cast it to type any or object.
try res.json(req['user'])
or res.json( (<any>req).user )
You may also use module/global augmentation
import { Request } from "express"
declare module "express" {
export interface Request {
user: any
}
}
newer express definition may need to augment the core def instead
declare module 'express-serve-static-core' {
export interface Request {
user: any
}
}
You can also make your own handler wrapper (instead of extending Router functionality in ExpressJs).
import * as express from 'express';
interface IUserRequest extends express.Request {
user: any
}
function myHandler(handler: (req: IUserRequest, res: express.Response, next?: express.NextFunction) => any) {
return (req: express.Request, res: express.Response, next: express.NextFunction) => {
try {
validateUser(req, res, (err) => { // your validateUser handler that makes a user property in express Request
if(err)
throw err;
let requestWrapper: IUserRequest = <IUserRequest>req;
handler(requestWrapper, res, next);
})
}
catch (ex) {
next(ex);
}
}
}
let app = express();
// init stuff for express but this.validateUser handler is not needed
app.use('/testuser', myHandler((req, res) => {
res.json(req.user);
}));
UPDATED: Since Typescript is evolving I would also consider using Type Guards
if (hasUser(req)) {
console.log(req.user)
}
function hasUser(request: Request): request is Request & { user: number } {
return 'user' in request && typeof request['user'] == 'number'
}
Solution 3 - node.js
You need to make a Declaration Merging:
> "Declaration merging means that the compiler merges two separate > declarations declared with the same name into a single definition."
To do that you can create a file called types.d.ts at your project src folder (or wherever you want) with the following content:
declare namespace Express {
export interface Request {
user: any;
}
export interface Response {
user: any;
}
}
Here we are telling the compiler to add user propertie to our Request and Response definiton.
Next, we need to attach this to our tsconfig.json.
Example:
{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"pretty": true,
"sourceMap": true,
"target": "es6",
"outDir": "./dist",
"baseUrl": "./lib"
},
"include": [
"lib/**/*.ts"
],
"exclude": [
"node_modules"
],
"files":["types.d.ts"]
}
Now, the typescript compiler know that Request, which has a property called user that in my case, can accept any json object. You can restrict the type for string if you want.
Solution 4 - node.js
You're getting this error because there's no type definition for the user
property in the the native express Request
object. You should install the type definitions for the middleware you're using to add user
to the request.
For example, if you're using the passport
library for JWT authentication as middleware:
router.get('/auth/userInfo', passport.authenticate('jwt', {session:false}), (req, res, next) => {
// Get their info from the DB and return it
User.findOne({ email: req.user.email }, (err, user) => {
if (err) {return next(err);}
...
...
You should add the type definitions for passport
:
npm install --save @types/passport
Solution 5 - node.js
- create new folder named
types
inside "src" folder - create file
<filename>.d.ts
intypes
folder - add following code:
declare namespace Express {
export interface Request {
user: any
}
}
- you will notice that error disappeared
- inside section
typeRoots
add the following totsconfig.json
file:
"typeRoots": [
"./node_module/@types",
"./src/types"
],
- you can use type
Request
of express like this:
import { Request, Response } from "express";
router.get('/auth/userInfo', this.validateUser, (req: Request, res: Response) => {
res.json(req.user);
});
- if you use ts-node you will get the same error when you try to execute your
.ts
file because ts-node ignore.d.ts
fies unless you add flag--files
topackage.json
script like this:
"scripts": {
.
.
"dev": "ts-node --files src/app.ts"
}
-
for more about this topic you can see this repository that created by Microsoft team.
Solution 6 - node.js
If you're using ts-node
and not ts-node-dev
, do this:
- Create a
typings
folder in yoursrc
folder. - Create a folder within the
typings
folder with the name of thepackage
you intend to extend. - Create an
index.d.ts
file with the new folder.
In my case, I am extending express
, I ended up with something like this:
src/
- typings/
- express/
- index.d.ts
within the index.d.ts
file I have this:
declare module Express {
export interface Request {
bucketUrl: string;
fileName: string;
}
}
Remember to update your .tsconfig
:
{
"compilerOptions": {
"typeRoots" : ["./node_modules/@types", "./typings"]
}
}
Solution 7 - node.js
For people using GraphQL, there comes a problem with the graphqlExpress
function not accepting your new interface
. I was attempting to follow this guide until I ran into this exact problem. I have figured out this solution:
this.app.use("/graphql", bodyParser.json(), this.auth, graphqlExpress((req: AuthRequest | undefined) => ({
schema,
context: {
user: req!.user
}
})));
And in the AuthRequest
interface:
import {Request} from "express"
export interface AuthRequest extends Request {
user?: string
}
Typescript will not allow you to use AuthRequest unless it is also allowed to be undefined. Therefore the | undefined
. (source)
After this point, the user object does not 100% exist on the Request object, hence the ? after user.
Solution 8 - node.js
I was using okta-angular-node with express for this https://developer.okta.com/blog/2018/10/30/basic-crud-angular-and-node
I came up with similar error for req.user
. Please check the server/auth.ts inside the above given link.
Type casting worked for me. Try to cast as follows
req.user
to (req['user'])
Solution 9 - node.js
Add a typeRoots
to your tsconfig.json
, this will tell typescript where to look to find declaration files. By default typescript looks in /node_modules/@types
, but when you specify this property, those defaults are cleared. You can read more here.
tsconfig.json
{
"compilerOptions": {
"typeRoots": ["./node_modules/@types", "./src/util"]
}
}
types.d.ts
import { User } from '../models/user'
declare global {
namespace Express {
interface Request {
user: User
}
}
}
Folder structure
node_modules
tsconfig.json
/src/
/models/
user.ts
/util/
types.d.ts
Solution 10 - node.js
You can try including the below snippet in your middleware.ts file:
declare module 'express-serve-static-core' {
interface Request {
user?: string
}
}
Solution 11 - node.js
Old question but if anyone stumbles across this like I did, take a look at 'Declaration Merging' - solved the issue for me.
https://www.typescriptlang.org/docs/handbook/declaration-merging.html
https://truetocode.com/extend-express-request-and-response-typescript-declaration-merging/
Solution 12 - node.js
You need to decorate the request using fastify decorators as mentioned below,
fastify.decorateRequest('user', <pass null or empty string here>)
and handle what should be in the user object.
Official document - https://www.fastify.io/docs/latest/Decorators/
Solution 13 - node.js
In my case, using ?
to solve the problem.
import { Request } from "express";
interface MyUserRequest extends Request {
// Use `user?:` here instead of `user:`.
user?: string;
}
router.get('/auth/userInfo', (req: MyUserRequest, res) => {
res.status(200).json(req.user)
});
Just extend "Request" without declaration.
Solution 14 - node.js
Because the "user" property doesn't exist in the native express "Request" object.
There are various workarounds for this issue.
1- Simplest one - ... as any
router.get('/auth/userInfo', this.validateUser, (req, res) => {
res.json((req as any).user);
})
2- Add the following code to the app.js or interface file once.
declare module "express-serve-static-core" {
interface Request {
user: any;
}
}
Solution 15 - node.js
declare global {
namespace Express {
interface Request {
user?: any
}
}
}