Struggling to enhance the Request interface in the express package with custom properties, I keep encountering this TypeScript error:
TS2339: Property '' does not exist on type 'Request<ParamsDictionary>'.Any ideas on how to resolve this issue?
After a recent update to its typings and dependencies, I came across a solution that should help resolve the errors in your application.
Within your tsconfig.json
{
"compilerOptions": {
//...
"typeRoots": [
"./custom_typings",
"./node_modules/@types"
],
}
// ...
}
Additionally, make sure to modify your custom typings as follows
// custom_typings/express/index.d.ts
declare namespace Express {
interface Request {
customProperties: string[];
}
}
Facing a similar issue, I attempted the solution provided in the preceding comments and referenced this repository. Unfortunately, the problem persisted even after following these steps. Further investigation revealed that it may be a bug associated with ts-node.
To resolve this issue, it is necessary to execute your server command with a --files flag.
For instance, if you typically start your server using
ts-node ./src/server.ts or nodemon ./src/server.ts,
you should modify it to
ts-node --files ./src/server.ts or nodemon --files ./src/server.ts
Subsequently, by making this adjustment, I successfully eliminated errors both in VS Code and during the server startup process.
To enhance the functionality, you can include the code snippet below. It will effectively append a personalized attribute to the express Request interface.
declare global {
namespace Express {
interface Request {
customProperty: string; //or any other data type
}
}
}
When I ran into this issue, it turned out that the types for express were missing in my setup. What I'm currently focused on is transitioning our codebase from Yarn to PNPM. One key distinction with PNPM is how it handles dependencies compared to Yarn - it doesn't hoist them like Yarn does. As a result, I needed to specify the dependencies in the package.json for each workspace that required them.
The specific error message I received was:
TSError: ⨯ Unable to compile TypeScript:
../server/src/api/filters/googleFilter.ts:6:23 - error TS2339: Property 'headers' does not exist on type 'Request<core.ParamsDictionary>'.
6 const idToken = req.headers.authorization;
It took some digging around before I decided to delve into the node_modules directory of the affected workspace. Within
node_modules/@types/express/index.d.ts/// <reference types="express-serve-static-core" />
/// <reference types="serve-static" />
import * as bodyParser from "body-parser";
import serveStatic = require("serve-static");
import * as core from "express-serve-static-core";
import * as qs from "qs";
My IDE highlighted errors indicating that it couldn't locate the types for express-serve-static-core and serve-static. To resolve this, I added them to the package.json file of that workspace, resolving the errors in the terminal.
I hope this explanation proves helpful to others facing similar challenges with PNPM.
Success story!
ts-nodeTo enhance the express Request interface, follow the advice of @Rishav Sinha by adding this file:
src/types/types.custom.d.tsdeclare global {
declare namespace Express {
interface Request {
user?: any,
page?: number,
}
}
}
// If there are no import/export statements in this file (i.e. it's a script)
// convert it into a module by including an empty export statement.
export { }
tsconfig.json{
"compilerOptions": {
//...
"typeRoots": [
"./types",
"./node_modules/@types"
],
}
// ...
}
--files options as recommended by @Shahar SharronIf you have globally installed ts-node
$ ts-node --files ./src/index.ts
or if running from your project dependencies, use ts-node
$ npx ts-node --files ./src/index.ts
nodemonFor those interested in using nodemom
nodemon.json{
"watch": ["src/**/*.ts"],
"ext": "ts,json",
"ignore": [
"src/**/*.spec.ts",
"src/**/*.test.ts"
],
"exec": "npx ts-node --files ./src/index.ts"
}
nodemon$ nodemon
My experience with resolving errors in vscode and compilation led me to make two specific changes:
To begin, create a declaration file and place the following code in a folder named typings:
The name of the folder holds significance:
typings/ or src/typings/
The actual filename is not crucial:
index.d.ts global.d.ts index.ts ...
import { Request, Response } from "express";
declare global {
namespace Express {
export interface Request {
propertyNameA: string;
propertyNameB: string;
}
export interface Response {
propertyNameA: string;
propertyNameB: string;
propertyNameC: string;
}
}
}
// This line does not serve any purpose
export { Request, Response };
Now, there are two options to consider:
A. Include the --files flag in your ts-node or nodemon execution command
For example: ts-node --files src/app.ts
B. Or update the ts-config.json file as follows:
{
"ts-node": {
"files": true
},
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
/* --- */
}
}
As I develop the React frontend for a library package, I want to clearly display to users the specific version of the library being utilized. Apart from manual methods or relying on Node.js, I am unsure of alternative approaches to achieve this. I am curi ...
I have a method called fallbackToLocalDBfileOrLocalStorageDB, which returns a promise and calls another method named getDBfileXHR, also returning a promise. In the code snippet provided, I am unsure whether I need to use 'resolve()' explicitly o ...
In our project, we are implementing the latest version of Froala and aim to configure it so that the toolbar is activated by a separate external button, similar to Gmail where the editor initially does not display a toolbar. I attempted to modify the &apo ...
While I am in the process of parsing a `json` object, I encountered an element labeled as `data-config`. Here's an example: var video = data.element.data-config; Every time I attempt to parse this specific element, an error pops up: ReferenceError ...
I have a component that validates a 4 digit phone code. It functions well and has a good appearance. However, I am struggling with the inability to autotab between numbers. Currently, I have to manually navigate to each input field and enter the number. Is ...
Hello there! I've been trying to figure out a way for this script to switch back to the original CSS external stylesheet. Here is the code that I currently have: $(document).ready(function() { $("#css-master2").click(function() { $("link[title=chang ...
Recently, I developed an application using the express framework with jade as its templating engine. During my exploration of jade's capabilities, I conducted a simple test: When passing an object from Node to the jade template upon rendering res.ren ...
Recently, I encountered the following code snippet: document.getElementById("myDiv").addEventListener("keydown", function (e){ if (e.keyCode == 8) { this.innerHTML += "⠀".repeat(4); e.preventDefault(); } //moves cursor } ...
I have implemented a two thumb range slider to define the maximum and minimum values. However, I recently discovered that it is possible for the thumbs to cross over each other - the max value can exceed the min value and vice versa. I am looking for a s ...
Currently facing an issue with the scaling of the viewport on certain mobile devices when loading new content via ng-include in our responsive website built on Foundation. The problem arises as the width of the page breaks, leading to horizontal scrolling. ...
I'm encountering an issue with rxjs. I have a function that is supposed to: Take a list of group IDs, such as: of(['1', '2']) Fetch the list of chats for each ID Return a merged list of chats However, when it reaches the toArray ...
So I've got a scene with some nice shadows being cast by a light, but there's this pesky static issue with the shadow. Check it out: https://i.sstatic.net/k3XIe.jpg When I try to fix it with a simple tweak like light.shadow.bias = -0.005;: htt ...
My angular application is currently coded in a single app.module.ts file, containing all the components. However, I am facing issues with slow loading times. Is there a way to improve the load time of the application while keeping all the components within ...
My issue involves animating ng-view with a slideup animation, requiring absolute positioning of elements and overflow-x: hidden to clip the content. However, I need to use the scrollTo element functionality on one sub-page, which doesn't work when bot ...
I've been attempting to update props from child to parent using the $event in an @click event. I sent the data and $event from the parent to the child as shown below. in the parent component: <v-filter :sortTypePrice="sortTypePrice" :sort ...
After a ripple animation on an item has executed, I would like to run a function. Currently, I am using the following code: <post-card id="card1"> <img width="70" height="70" src="../images/start.png"> <h2>P ...
I am attempting to retrieve data from the TVMaze API using React, TypeScript, and useContext. Although I can display the data, the useContext does not update with the return value, so when I use the map function, nothing is displayed. Any advice on how to ...
I have saved JSON data in a database under the accessPoint field, and it appears like this: {"mode": "client", "rate": 0, "ssid": "RMG", "signal": 0, "channel": 0, "password": "", "username": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...
I'm currently working on populating a form if the user input for name and firstname already exists in my database. However, I am facing an issue with my JavaScript program where it fails to check if the name and firstname combination already exists i ...
As mentioned in the title, I am working with 2 custom components within a basic NextJS application: <section> <CompA></CompA> <CompB></CompB> </section> I am trying to figure out how to have a button inside Comp ...