Question

我在visual studio中使用typescript 1.5。我有一个名为app.ts的主类，另一个叫做FizzBuzzManager.ts。我无法弄清楚这段代码有什么问题，但它会输出错误，“TypeError：jim.FizzBuzzManager不是构造函数”。

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();

};

FizzBuzzManager.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.FizzBuzzManager不是构造函数

使用--out：https://basarat.gitbooks.io/typescript/docs/tips/outFile.html

时，这是一个常见错误

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

Answer 2

我在谷歌搜索后发现了这个问题＆＃34;打字稿不是构造函数＆＃34;。不幸的是，这些答案并没有解决我的问题。我最终找到了解决方案，所以我在这里发帖给后人。

<强>问题

我定义了以下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 3

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

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

Answer 4

我试图重复你的问题而我没有发现任何错误：

<强> 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();

    };
}

<强> FizzBuzzManager.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（不是它揭示了问题的根源，但您可能会在转换后的代码中看到问题。）

Answer 5

您使用哪种打字稿版本？

tsc 1.8.10中有一个错误：

https://github.com/Microsoft/TypeScript/issues/8910

Answer 6

对于将来的读者来说，问题还可能在于构造函数是否期望参数并且您没有提供任何参数或其他数量的参数。这是因为对于Javascript，具有不同数量的参数的函数就是不同的函数。

一个简单的解决方案是在构造函数中添加默认参数。

我的例子是这样的：

SegmentsQueryBuilder.ts

class SegmentsQueryBuilder {
  //...
  constructor(scoping) {
    //...
  }
//...
}

segments.query.builder.test.ts

describe('Segment base query', () => {
  test('should create segment select with default fields', () => {
    const segmentQueryBuilder = new SegmentQueryBuilder() //ERROR HERE
//...

这里的解决方案是在构造函数中使用默认参数，或者在构造函数的使用中传递作用域对象

Answer 7

在我的情况下，当我使用带有预设环境的babel来编译TS源时，会遇到问题。

作品：

{
    "presets": ["@babel/typescript"],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread",
        "@babel/plugin-transform-runtime"
    ],
    "ignore": ["node_modules", "src/test"]
}

错误：

{
    "presets": [
        "@babel/typescript",
        [
            "@babel/preset-env",
            {
                "targets": {
                    "browsers": [
                        "last 2 Chrome versions",
                        "last 1 Safari versions",
                        "last 1 Firefox versions"
                    ]
                }
            }
        ]
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread",
        "@babel/plugin-transform-runtime"
    ],
    "env": {
        "node": {
            "presets": [
                [
                    "@babel/preset-env",
                    {
                        "targets": {
                            "esmodules": true,
                            "node": "current"
                        },
                        "modules": "auto"
                    }
                ]
            ]
        }
    },

    "ignore": ["node_modules", "src/test"]
}

Answer 8

我遇到了这个错误my_imported_module_1.MyModule is not a constructor。

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

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

在我的tsconfig.json中，我将“目标”设置为“ 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 9

首先，请确保使用

Day

将代码引用到打字稿根文件中的另一个.ts文件中

要编译存在于不同文件中的打字稿文件，请使用此命令

tsc --out app.js app.ts

因为此命令将所有打字稿文件转换为app.js

Answer 10

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

Answer 11

此错误消息表示[Class]尚未在对其构造函数进行调用时初始化。

Unlike functions，不会将类“提升”到声明它们的作用域的顶部。每当代码使用稍后声明的类（即，在文件的下方）时，就会出现此错误。

解决方案：重新组织代码，使类的调用站点出现在源代码中该类的定义下方。

Answer 12

使用JetBrains WebStorm，即使在代码本身中已解决导入问题，也有可能在测试中出现此错误。

例如以下修复程序：

np.tile(datai,(N_repeats,1))

解决了该问题，但之后必须运行// import { Foo } from '@foo/bar'; import Foo = require('@foo/bar);或npm run compile。

然后按预期运行WebStorm中的测试。

Answer 13

我认为你在做：

export class Something

改成这个就行了

export default class Something

为什么这个Typescript输出“[Class]不是构造函数。”？

13 个答案: