Typescript compiled Javascript Code is not working (variable.default.function())

Question

The Problem is that the js generated from home.ts doesn't find my index.js class. I got no errors in Typescript but I got one when I run the javascript.

TypeError: index_1.default.login is not a function at /Users/Jannik/Documents/Web/Willhub-ts/dist/controllers/home.js:12:37 at Object. (/Users/Jannik/Documents/Web/Willhub-ts/dist/controllers/home.js:15:3) at Module._compile (internal/modules/cjs/loader.js:956:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10) at Module.load (internal/modules/cjs/loader.js:812:32) at Function.Module._load (internal/modules/cjs/loader.js:724:14) at Module.require (internal/modules/cjs/loader.js:849:19) at require (internal/modules/cjs/helpers.js:74:18) at Object. (/Users/Jannik/Documents/Web/Willhub-ts/dist/app.js:20:24) at Module._compile (internal/modules/cjs/loader.js:956:30)

Any idea where this could come from?

Home.ts:

router.get('/', Index.login());
router.get('/', Index.index());

Home.js:

router.get('/', index_1.default.login());
router.get('/', index_1.default.index());

Index.ts

import {Request, Response} from 'express';


export default class Index {
private static _index: Function;
private static _login: Function;

constructor(){
    this.constructIndex();
    this.constructLogin();
}

//Private Methods:
private constructIndex(): void {
    Index._index = function (req: Request, res: Response, next) {

        res.render("main", { "header-enabled": true, "nav-enabled": true })
        next();
    }
}

private constructLogin(): void {
    Index._index = function (req: Request, res: Response, next) {
        res.render("main", { "header-enabled": true, "nav-enabled": true })
        const isLoggedIn: boolean = true;
    }
}

//Public Methods:
public static get index() : Function {
    return this._index;
}

public static get login(): Function {
    return this._login;
}

}

Index.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });


class Index {
constructor() {
    this.constructIndex();
    this.constructLogin();
}
//Private Methods:
constructIndex() {
    Index._index = function (req, res, next) {
        res.render("main", { "header-enabled": true, "nav-enabled": true });
        next();
    };
}
constructLogin() {
    Index._index = function (req, res, next) {
        res.render("main", { "header-enabled": true, "nav-enabled": true });
        const isLoggedIn = true;
    };
}
//Public Methods:
static get index() {
    return this._index;
}
static get login() {
    return this._login;
}
}
exports.default = Index;
//# sourceMappingURL=index.js.map

Answer 1

First, your constructLogin() is probably wrong since it should be assigning Index._login I guess:

private constructLogin(): void {
    // -----\/------------------
    Index._index = function (req: Request, res: Response, next) {
        res.render("main", { "header-enabled": true, "nav-enabled": true })
        const isLoggedIn: boolean = true;
    }
}

If you fix that, check whether you use Index.login() before creating an instance first. That's because:

• Index.login is a getter function that returns Index._login
• Index.login() invokes the resulting Index._login , but...
• Index._login is set in constructLogin() , and...
• constructLogin() is called in the constructor() function

If you invoke Index.login() before creating an instance, Index._login would be undefined :

 class Index { constructor() { this.constructIndex(); this.constructLogin(); } //Private Methods: constructIndex() { Index._index = function (req, res, next) { res.render("main", { "header-enabled": true, "nav-enabled": true }); next(); }; } constructLogin() { // NOTICE: Assigns `_login` instead Index._login = function (req, res, next) { res.render("main", { "header-enabled": true, "nav-enabled": true }); const isLoggedIn = true; }; } //Public Methods: static get index() { return this._index; } static get login() { return this._login; } } console.log(Index._login); // undefined let i = new Index(); console.log(Index._login); // function