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?
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.
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'
}
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.
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
types
inside "src" folder<filename>.d.ts
in types
folderdeclare namespace Express {
export interface Request {
user: any
}
}
typeRoots
add the following to tsconfig.json
file:"typeRoots": [
"./node_module/@types",
"./src/types"
],
Request
of express like this:import { Request, Response } from "express";
router.get('/auth/userInfo', this.validateUser, (req: Request, res: Response) => {
res.json(req.user);
});
.ts
file because ts-node ignore .d.ts
fies unless you add flag --files
to package.json
script like this:"scripts": {
.
.
"dev": "ts-node --files src/app.ts"
}
If you're using ts-node
and not ts-node-dev
, do this:
typings
folder in your src
folder.typings
folder with the name of the package
you intend to extend.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"]
}
}
For people using GraphQL, there comes a problem with the graphqlExpress
function not accepting your new interface
. I was attempting to followthis 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
| undefined
. ( source )
After this point, the user object does not 100% exist on the Request object, hence the? after user.
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.
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'])
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
You can try including the below snippet in your middleware.ts file:
declare module 'express-serve-static-core' { interface Request { user?: string } }
declare global {
namespace Express {
interface Request {
user?: any
}
}
}
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/
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/
I recently had the same issue, I followed the solution in the previous comments and this repo and I still had the same issue. After doing more digging it seems like it's a bug with ts-node.
To solve this you need to run your server with a --files flag
So if you normally run your server ts-node ./src/server.ts or nodemon ./src/server.ts Change it to ts-node --files ./src/server.ts or nodemon --files ./src/server.ts
After that, I was able to get rid of both the VScode errors and errors while starting the server.
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;
}
}
in my case I had to do this
interface RequestUserAuth extends Request {
user?: {
id: string
role: string
// or any type you want but you must to use it like that "user?: etc..."
}
}
app.get('/', auth, (req: RequestUserAuth, res: Response) => {
console.log(req.user)
})
Just do
import { Request, Response} from "express";
then do this;
router.get('/auth/userInfo', this.validateUser, (req:any, res:Response) => { res.json(req.user); });
I had a working index.d.ts using other tips here but the fact that it was in the same folder as an unrelated index.ts was causing it to not work. I moved index.d.ts to its own types folder and the types started to get used. I'm guessing there was a collision with index.ts being at the same level.
Just going to share my types/index.d.ts in case it helps someone who is also using Prisma
import { User as PrismaUser } from "../prisma/prismaclient";
declare module "passport" {
namespace Express {
interface User extends PrismaUser {}
}
}
declare module 'express-serve-static-core' {
interface Request {
user?: PrismaUser
}
interface Response {
user?: PrismaUser
}
}
declare module "express-session" {
interface SessionData {
user: PrismaUser;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.