为什么这个Typescript输出"[Class]不是构造函数."？

Question

我在visual studio中使用typescript 1.5.我有一个名为app.ts的主类,另一个叫做FizzBu​​zzManager.ts.我无法弄清楚这段代码有什么问题,但它输出错误,"TypeError:jim.FizzBu​​zzManager不是构造函数".

app.ts

 namespace jim {
    class Greeter {
        element: HTMLElement;
        span: HTMLElement;
        timerToken: number;

        constructor() {
            window.console.log("constructing Greeter.");
            this.init();
        }

        private init() {
            window.console.log("Calling init.");
            var _fizzBuzzManager: any = new jim.FizzBuzzManager();
    }

}

    window.onload = () => {
        window.console.log("Hello")
        var greeter = new Greeter();

};

FizzBu​​zzManager.ts

namespace jim {

export class FizzBuzzManager {

    constructor() {
        window.console.log("Making a FizzBuzzManager.");
    }

    public myThing: String = "Hi";

    public fizzBuzz2() {
        window.console.log("fizzbuzzing2 " + this.myThing);
    }

}

export function fizzBuzz() {
    window.console.log("export function fizzbuzz");
}

}

在浏览器中查看编译输出时的输出是:

Hello                                                  app.js:15:9 
constructing Greeter.                                  app.js:5:13 
Calling init.                                          app.js:9:13 
TypeError: jim.FizzBuzzManager is not a constructor    app.js:10:36

Answer 1

TypeError:jim.FizzBu​​zzManager不是构造函数

使用时这是一个常见错误--out:https://basarat.gitbooks.io/typescript/docs/tips/outFile.html

您有责任按正确的顺序加载文件.不要用完并使用外部模块

Answer 2

当使用module.exports/从普通 ES6 / Node.js 迁移require()时，我经常会忘记删除旧的module.exports = <class>，这也会导致此错误。

Answer 3

就我而言，这只是循环依赖。看看那个，因为这个很难抓住

Answer 4

在搜索“打字稿不是构造函数”之后，我遇到了这个问题。不幸的是，这些答案并不能解决我的问题。我最终找到了解决方案，因此我将其发布在这里供后代参考。

问题

我定义了以下TypeScript类：

module mymodule {
    export class myclass {
        addDocuments(parentId: string) {
        // Code removed for brevity...
        }
    }
}

然后，我在一个单独的模块中调用该类：

module mymodule.test {

    var myClass = new mymodule.myclass();

    export function initialize(): void {
        myClass.addDocuments("test123");
    }
}

编译后并尝试加载执行生成的Javascript的页面时，该页面无法正确加载，并且我看到了以下JS异常：

未捕获的TypeError：mymodule.myclass不是构造函数

解

一位开发人员友好地指出，我需要在函数内部移动对象的实例化。因此，现在我的实例化代码如下所示，并且可以正常工作：

module mymodule.test {

    var myClass: mymodule.myclass;

    export function initialize(): void {
        myClass = new mymodule.myclass();
        myClass.addDocuments("test123");
    }
}

Answer 5

我有这个错误my_imported_module_1.MyModule is not a constructor。

当我收到此错误时，我正在使用该方法： import { MyModule } from 'my-module-sdk';

但当我将其更改为这种方法时，我得到了它的工作： const MyModule = require('my-module-sdk');

在我的 tsconfig.json 中，我将“target”设置为“es5”，并尝试将其更改为“es6”，但这仍然没有帮助。

以下是我的一些其他 tsconfig 选项：

"target": "es5",
"module": "esnext",
"declaration": true,
"rootDir": "./src",
"moduleResolution": "node",
"lib": ["es6", "dom", "es2016", "es2017", "es2018", "es2019", 
"es2020"],
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"allowJs": false

Answer 6

将其视为直接用 JavaScript 编写代码可能会有所帮助。我遇到这个问题是因为我在用 TypeScript 编写的 Angular 2 测试规范中遇到了同样的错误。根据上面的答案思考之后，我意识到 JavaScript 不知道我的 BuzzFeed 类的等价物是什么，因为它位于文件的底部。

在我的第一个描述语句之前，我将类移至文件顶部，一切正常。认为这可能会帮助像我这样的其他人。

Answer 7

确保在使用之前声明类定义。这就是我的问题的解决方案。

正确的：

class Foo {...}
...
const foo = new Foo();

错误：

const foo = new Foo();
...
class Foo {...}

Answer 8

我尝试重复你的问题，但没有发现任何错误：

应用程序.ts

namespace jim {
    class Greeter {
        element: HTMLElement;
        span: HTMLElement;
        timerToken: number;

        constructor() {
            window.console.log("constructing Greeter.");
            this.init();
        }

        private init() {
            window.console.log("Calling init.");
            var _fizzBuzzManager: any = new jim.FizzBuzzManager();
        }

    }

    window.onload = () => {
        window.console.log("Hello")
        var greeter = new Greeter();

    };
}

FizzBu​​zzManager.ts

namespace jim {

export class FizzBuzzManager {

    constructor() {
        window.console.log("Making a FizzBuzzManager.");
    }

    public myThing: String = "Hi";

    public fizzBuzz2() {
        window.console.log("fizzbuzzing2 " + this.myThing);
    }

}

export function fizzBuzz() {
    window.console.log("export function fizzbuzz");
}

}

然后

c:\Work\TypeScript-playground>node_modules\.bin\tsc --out app.js app.ts FizzBuzzManager.ts

编译后的 app.js 文件如下所示：

var jim;
(function (jim) {
    var Greeter = (function () {
        function Greeter() {
            window.console.log("constructing Greeter.");
            this.init();
        }
        Greeter.prototype.init = function () {
            window.console.log("Calling init.");
            var _fizzBuzzManager = new jim.FizzBuzzManager();
        };
        return Greeter;
    })();
    window.onload = function () {
        window.console.log("Hello");
        var greeter = new Greeter();
    };
})(jim || (jim = {}));
var jim;
(function (jim) {
    var FizzBuzzManager = (function () {
        function FizzBuzzManager() {
            this.myThing = "Hi";
            window.console.log("Making a FizzBuzzManager.");
        }
        FizzBuzzManager.prototype.fizzBuzz2 = function () {
            window.console.log("fizzbuzzing2 " + this.myThing);
        };
        return FizzBuzzManager;
    })();
    jim.FizzBuzzManager = FizzBuzzManager;
    function fizzBuzz() {
        window.console.log("export function fizzbuzz");
    }
    jim.fizzBuzz = fizzBuzz;
})(jim || (jim = {}));

Chrome 浏览器在其控制台中报告：

app.js:15 Hello
app.js:5 constructing Greeter.
app.js:9 Calling init.
app.js:24 Making a FizzBuzzManager.

对于您在这里遇到的错误有一个很好的解释：Javascript: TypeError: ... is not a constructor（并不是它揭示了问题的根源，而是您可能会在转译的代码中看到问题。）