Typescript 编译的 Javascript 代码不起作用(variable.default.function())

Posted

技术标签:

【中文标题】Typescript 编译的 Javascript 代码不起作用(variable.default.function())【英文标题】:Typescript compiled Javascript Code is not working (variable.default.function()) 【发布时间】:2020-02-15 01:44:22 【问题描述】:

问题是 home.ts 生成的 js 没有找到我的 index.js 类。我在 Typescript 中没有错误,但我在运行 javascript 时遇到了错误。

TypeError: index_1.default.login 不是函数 在 /Users/Jannik/Documents/Web/Willhub-ts/dist/controllers/home.js:12:37 在对象。 (/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) 在需要(内部/模块/cjs/helpers.js:74:18) 在对象。 (/Users/Jannik/Documents/Web/Willhub-ts/dist/app.js:20:24) 在 Module._compile (internal/modules/cjs/loader.js:956:30)

知道这可能来自哪里吗?

Home.ts:

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

Home.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

【问题讨论】:

【参考方案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 是一个 getter 函数,它返回 Index._login Index.login() 调用生成的 Index._login,但是... Index._login 设置在 constructLogin() 中,并且... constructLogin()constructor() 函数中被调用

如果您在创建实例之前调用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

【讨论】:

以上是关于Typescript 编译的 Javascript 代码不起作用(variable.default.function())的主要内容,如果未能解决你的问题,请参考以下文章

TypeScript

javascript Gulp编译Typescript

Typescript 编译的 Javascript 代码不起作用(variable.default.function())

如何使用 npm 脚本将 typescript 编译成 javascript,然后编译成 1 个文件

多个 Typescript 文件编译成独立的 javascript 文件

安装typescript的命令,编译typescr为JavaScript