The mistake occurs when attempting to access a class property generated by a class constructor, resulting in a type error due to reading properties of

Question

The mistake occurs when attempting to access a class property generated by a class constructor, resulting in a type error due to reading properties of

I'm having trouble building an Express API in TypeScript using Node.js. I am new to Express and I have been learning Node, JavaScript, and TypeScript since 2022, so I apologize if the question is not too complex. The issue I'm facing is trying to build a class Controller that handles the necessary instructions for every route in my Express router. I am passing a DAO through the constructor that I have built to access the Firebase Firestore database. However, when I instantiate the object and try to run it, it gives me a "cannot read properties of undefined" error. Even though I found a solution using a closure, I want to learn how to do this using classes. Here is the code of the DAO:

 // Code for the DAO class goes here...

And this is the code for the Controller class:

 // Code for the Controller class goes here...

Thanks for your time. I'm trying to learn this beautiful world of backend development. I have tried various solutions to my issue, such as calling the constructor outside the class and passing the constant to the constructor, instantiating the DAO object as a parameter, and even calling the DAO constructor in a global variable and defining the properties. However, the only solution I found for my issue is transforming the class into a closure function and calling the constructor within the closure.

 // Error message and stack trace about 'dbManager' being undefined...

Routes

 // Code for the routes definition and calling the readData method...

javascript typescript express class undefined

Answer 1

Answer №1

const { fetchInfo, saveInfo, updateInfo, removeInfo } = new DataHandler('welcome')

You cannot destructure normally declared instance methods from classes.

Let's simplify this with an example:

class Bar {
    private info = "example"
    getInfo() { return this.info }
}

Calling getInfo in this format works:

const bar = new Bar()
console.log(bar.getInfo())
// example

However, if you destructure the method like this:

const { getInfo } = new Bar()
console.log(getInfo())
// Cannot read properties of undefined (reading 'info')

It will result in an error.

The issue arises because the value of this is lost when the method is deconstructed without the use of ., which provides the class instance to the function.

Let's consider another example:

class Bar {
    private info = "example"
    getInfo = () => { return this.info }
}

const bar = new Bar()
console.log(bar.getInfo())
// example

const { getInfo } = new Bar()
console.log(getInfo())
// example

In this case, TypeScript compiles property assignments in classes to occur in the constructor, and the arrow function => captures the value of this when it was declared. This allows for the method to be deconstructed and still function correctly.

It's important to note that while the traditional instance method declaration is shared among all instances, the arrow function method creates a new function for each instance. This may impact performance if a large number of instances are created, but for backend service classes like this, it's typically not a concern.

In your scenario, simply call the method on the instance:

const handler = new DataHandler('welcome')
router.get('/', (req, res) => handler.fetchInfo(req, res))

Alternatively, declare your method as an arrow function.

export class DataHandler {
  //...
  fetchInfo = async (req: Request, res: Response): Promise<void> => {
    const id: string = req.params.id
    if (id !== undefined) {
      res.send(await this.dbManager.getById(id))
    } else {
      res.send(await this.dbManager.getAll())
    }
  }
  //...
}

const { fetchInfo } = new DataHandler()
fetchInfo() // should work now

Answer 2

const { fetchInfo, saveInfo, updateInfo, removeInfo } = new DataHandler('welcome')

You cannot destructure normally declared instance methods from classes.

Let's simplify this with an example:

class Bar {
    private info = "example"
    getInfo() { return this.info }
}

Calling getInfo in this format works:

const bar = new Bar()
console.log(bar.getInfo())
// example

However, if you destructure the method like this:

const { getInfo } = new Bar()
console.log(getInfo())
// Cannot read properties of undefined (reading 'info')

It will result in an error.

The issue arises because the value of this is lost when the method is deconstructed without the use of ., which provides the class instance to the function.

Let's consider another example:

class Bar {
    private info = "example"
    getInfo = () => { return this.info }
}

const bar = new Bar()
console.log(bar.getInfo())
// example

const { getInfo } = new Bar()
console.log(getInfo())
// example

In this case, TypeScript compiles property assignments in classes to occur in the constructor, and the arrow function => captures the value of this when it was declared. This allows for the method to be deconstructed and still function correctly.

It's important to note that while the traditional instance method declaration is shared among all instances, the arrow function method creates a new function for each instance. This may impact performance if a large number of instances are created, but for backend service classes like this, it's typically not a concern.

In your scenario, simply call the method on the instance:

const handler = new DataHandler('welcome')
router.get('/', (req, res) => handler.fetchInfo(req, res))

Alternatively, declare your method as an arrow function.

export class DataHandler {
  //...
  fetchInfo = async (req: Request, res: Response): Promise<void> => {
    const id: string = req.params.id
    if (id !== undefined) {
      res.send(await this.dbManager.getById(id))
    } else {
      res.send(await this.dbManager.getAll())
    }
  }
  //...
}

const { fetchInfo } = new DataHandler()
fetchInfo() // should work now

The mistake occurs when attempting to access a class property generated by a class constructor, resulting in a type error due to reading properties of

Answer №1

Similar questions

Tips for displaying the data on top of individual column bars: Hightcharts, Vue-chartkick, and Cube Js

Utilizing mailerlite popups within a Next.js application: A step-by-step guide

The 'payload' property is not found within the 'Actions' type

Exploring the contrast of app.use and app.get within the realm of proxy servers

What is the best way to open a page in a new tab within the row command event of a gridview?

Modifying a $scope variable beyond the controller in AngularJS

Load Vue dynamically to implement reCAPTCHA script

Having trouble getting req.files to work in a Node.js Express application?

What is the C sharp version of this code structure?

Is it possible to trigger an event for only one connected client instead of broadcasting it to all clients using socket.io?

Error: The import token is not what Express was expecting

Achieving the extraction of a particular string from an HTML element using JavaScript

Deselect the DOM element

Axios: Exception handling does not involve entering the catch method

Adding to an existing array in MongoJS

Eliminate the ArrayOfObjects by filtering out the items with a specific ID

I'm having trouble figuring out how to calculate total expenses by category using sequelize

After adding data to an empty array, index 0 becomes undefined for someEmptyArray

Refreshing the PHP variable without needing to refresh the page

Issue: Attempting to write data after reaching the end in Node.js while using

The mistake occurs when attempting to access a class property generated by a class constructor, resulting in a type error due to reading properties of

Answer №1

Similar questions

Tips for displaying the data on top of individual column bars: Hightcharts, Vue-chartkick, and Cube Js

Utilizing mailerlite popups within a Next.js application: A step-by-step guide

The 'payload' property is not found within the 'Actions' type

Exploring the contrast of app.use and app.get *within the realm of proxy servers*

What is the best way to open a page in a new tab within the row command event of a gridview?

Modifying a $scope variable beyond the controller in AngularJS

Load Vue dynamically to implement reCAPTCHA script

Having trouble getting req.files to work in a Node.js Express application?

What is the C sharp version of this code structure?

Is it possible to trigger an event for only one connected client instead of broadcasting it to all clients using socket.io?

Error: The import token is not what Express was expecting

Achieving the extraction of a particular string from an HTML element using JavaScript

Deselect the DOM element

Axios: Exception handling does not involve entering the catch method

Adding to an existing array in MongoJS

Eliminate the ArrayOfObjects by filtering out the items with a specific ID

I'm having trouble figuring out how to calculate total expenses by category using sequelize

After adding data to an empty array, index 0 becomes undefined for someEmptyArray

Refreshing the PHP variable without needing to refresh the page

Issue: Attempting to write data after reaching the end in Node.js while using

Exploring the contrast of app.use and app.get within the realm of proxy servers