Typescript 編譯 Javascript 代碼不起作用（variable.default.function()）

Question

問題是從 home.ts 生成的 js 沒有找到我的 index.js class。 我在 Typescript 中沒有錯誤，但是當我運行 javascript 時出現錯誤。

類型錯誤：index_1.default.login 不是 function 在 /Users/Jannik/Documents/Web/Willhub-ts/dist/controllers/home.js:12:37 在 Object。 (/Users/Jannik/Documents/Web/Willhub-ts/dist/controllers/home.js:15:3) 在 Module._compile (internal/modules/cjs/loader.js:956:30) 在 Object.Module。 _extensions..js (internal/modules/cjs/loader.js:973:10) 在 Module.load (internal/modules/cjs/loader.js:812:32) 在 Function.Module._load (internal/modules/cjs /loader.js:724:14) 在 Module.require (internal/modules/cjs/loader.js:849:19) 在 require (internal/modules/cjs/helpers.js:74:18) 在 Object。 (/Users/Jannik/Documents/Web/Willhub-ts/dist/app.js:20:24) 在 Module._compile (internal/modules/cjs/loader.js:956:30)

知道這可能來自哪里嗎？

主頁.ts：

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

主頁.js：

router.get('/', index_1.default.login());
router.get('/', index_1.default.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;
}

}

索引.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

首先，您的constructLogin()可能是錯誤的，因為我猜它應該分配Index._login ：

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

如果您解決了這個問題，請在首先創建實例之前檢查您是否使用Index.login() 。 那是因為：

• Index.login是返回Index._login
• Index.login()調用生成的Index._login ，但是...
• Index._login設置在constructLogin()中，並且...
• 在constructLogin()中調用constructor() function

如果在創建實例之前調用Index.login() ， Index._login將是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