Почему этот Typescript вывод "[Класс] не является конструктором."?

Ответ 1

Ошибка типа: jim.FizzBuzzManager не является конструктором

Это распространенная ошибка при использовании --out: https://basarat.gitbooks.io/typescript/docs/tips/outFile.html

Вы несете ответственность за загрузку файлов в правильном порядке. Не используйте и используйте внешние модули 🌹

Ответ 2

Я столкнулся с этим вопросом после googling "typescript не является конструктором". К сожалению, эти ответы не помогли решить мою проблему. В конце концов я нашел решение, поэтому я размещаю его здесь для потомков.

Проблема

Я определил следующий класс 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:

Uncaught TypeError: mymodule.myclass не является конструктором

Решение

Один разработчик был достаточно любезен, чтобы указать, что мне нужно было перемещать экземпляр объекта внутри моей функции. Итак, теперь код экземпляра выглядит так, и он работает так, как должен:

module mymodule.test {

    var myClass: mymodule.myclass;

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

Ответ 3

Возможно, было бы полезно подумать об этом, как если бы вы непосредственно писали код в JavaScript. Я столкнулся с этим вопросом, потому что получил ту же ошибку в тестовой спецификации Angular 2, написанной в TypeScript. Подумав об этом на основе вышеприведенных ответов, я понял, что JavaScript не имеет понятия, какой мой эквивалент вашему классу BuzzFeed был, потому что он находился в нижней части файла.

Я переместил класс до вершины файла перед моим первым описанием описания, и все работает. Думал, что это может помочь другим, как я.

Ответ 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:... не является конструктором (не то, что он показывает происхождение проблема, но вы можете увидеть проблему в своем преобразованном коде.)

Ответ 5

Какую версию typescript вы используете?

В tsc 1.8.10 есть ошибка:

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

Ответ 6

В моем случае у меня была проблема, когда я использовал babel с preset-env для компиляции 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"]
}

Ответ 7

во-первых, убедитесь, что использование

/// <reference path = "FizzBuzzManager.ts" />   

для ссылки на другой файл .ts в корневом файле машинописи

чтобы скомпилировать машинописные файлы, которые существуют в разных file.ts, используйте эту команду

tsc --out app.js app.ts

потому что эта команда преобразует все машинописные файлы в app.js

Ответ 8

При переходе с простого ES6/Node.js с использованием module.exports/require() мне часто случается, что я забываю удалить старый module.exports = <class> который также вызывает эту ошибку.