Contructor injection does noot work with classes

Description

I have AuthRouter class depends on AuthController which is also depends on AuthService. I inject the dependencies in the constructor of each class but when I call the this.authService inside the AuthController, the injection does not work.

Minimal code-snippet showcasing the problem AuthRouter:

I create a class AuthRouter:

import { Router } from 'express'
import Container, { Service } from 'typedi'
import AuthenticationController from './index'

@Service()  
class AuthenticationRouter {
  constructor (private readonly authenticationController: AuthenticationController) {}

  getRouter () {
    const router = Router()
    router.get('/auth/url', this.authenticationController.getAuthUrl)

    return router
  }
}

const authRouter = Container.get(AuthenticationRouter)
const routes = authRouter.getRouter()

export default routes

AuthController:

import { Request, Response } from 'express'
import { Service } from 'typedi'
import AuthenticationService from './authentication-service'

@Service()
class AuthenticationController {
  constructor (private readonly authService: AuthenticationService) {}

  async getAuthUrl (req: Request<{}, {}, {}, {redirect: string}>, res: Response) {
    return res.redirect(this.authService.generateAuthenticationUrl(req.query.redirect))
  }

  
}

export default AuthenticationController

Expected behavior

The dependency should be injected correctly by constructor.

Actual behavior

Dependency does not injected and I got an error:

(node:6064) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'authService' of undefined

[JoaoLSS]

this has nothing to do with typedi, is about javascript binding, see the error:

Cannot read property 'authService' of undefined

this means that this is undefined, and that’s because when you pass the getAuthUrl function to router.get it’s this is not the AuthenticationController instance anymore. test this code to see what happens:

//this class is like the AuthenticationController one
class SomeClass {
    constructor(private readonly someProperty = { someInnerProperty: 'someString' }) {}

    someMethod() {
        console.log(this.someProperty.someInnerProperty)
    }
}

//this class is like the AuthenticationRouter one
class SomeOtherClass {
    constructor(private readonly someClass = new SomeClass()) {}

    someOtherMethod() {
       // im passing a function of the instance "someClass" to setTimeout the same way you're passing a function of the 
       // instance "authenticationController" to router.get
        setTimeout(this.someClass.someMethod, 100)
    }
}

const instance = new SomeOtherClass()
// it will break the exact same way
instance.someOtherMethod()

/***********************************/

//suppose a pseudo implementation of router.get:

router.get(url: string, callback: RequestHandler) {

        // do something

       // here callback doesnt belong to any class, it is just a detached function, and its `this` variable will be the `this` on the
       // scope of router.get  
       callback(req,res,next)
}

//it's like js is doing something like that: 

const callback = this.authenticationController.getAuthUrl
router.get('/auth/url', callback)

// it copies the reference to the function but it doesn't copy the scope where the function is declared
// so to capture the this argument on the function you can do one of two things

//1. use bind() -> this method is available in any function, what it does is that it attaches the value you pass it to the this argument of the function

@Service()
class AuthenticationController {
  constructor (private readonly authService: AuthenticationService) {
     // here im saying that independent of where this function is called the `this` argument should always be this `this`, i.e., the
    // the instance that is been initialized
     this.getAuthUrl = this.getAuthUrl.bind(this) 
  }

  async getAuthUrl (req: Request<{}, {}, {}, {redirect: string}>, res: Response) {
    return res.redirect(this.authService.generateAuthenticationUrl(req.query.redirect))
  }

  
}

//2. use arrow functions -> arrow functions uses closures to keep their scope, so they can mantain the `this` argument independent of where they are called

@Service()
class AuthenticationController {
  constructor (private readonly authService: AuthenticationService) {}

 // here the arrow function is trapping the this of its scope, i.e. the instance of the class where it is defined
 getAuthUrl = async (req: Request<{}, {}, {}, {redirect: string}>, res: Response) => {
    return res.redirect(this.authService.generateAuthenticationUrl(req.query.redirect))
  }

  
}

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.