打字机未导入角装饰器“类”

Question

我正在开发一个有角度的应用程序，并且与仅在装饰器中使用的类作斗争。 该文件不是由编译的源导入的。 它很可能在Typescript编译器中进行了优化，因为它仅在装饰器中使用。 但是，即使从未声明过“导入”变量，也将在元数据中使用它（请注意第46行JS中的“ typeof firstclass_model_1.FirstClass”，其中未定义firstclass_model_1）。

这是Typescript还是Angular中的错误？

我可以通过在打字稿源中使用FirstClass来解决此问题。

打字稿来源：

import { Component, OnInit, Input } from "@angular/core";
import { FirstClass } from "~/shared/firstclass.model";
import { SecondClass } from "~/shared/secondclass.model";
import { DataService } from "~/shared/data.service";

@Component({
    selector: "test-component",
    moduleId: module.id,
    templateUrl: "./test.component.html",
    styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

    tickettypes: TicketType[];

    @Input("first")
    public get first() {
        return this._first;
    };
    public set first(value: FirstClass) {
        this._first = value;
    }
    private _first: FirstClass;

    @Input("second")
    public get second() {
        return this._second;
    };
    public set second(value: SecondClass) {
        this._second = value;
    }
    private _second: SecondClass;

    constructor(
        private dataService: DataService
    ) {
        // Use the component constructor to inject providers.
    }

    ngOnInit(): void {

    }

    itemTap(tickettype: TicketType) {
        let item = new SecondClass( {
            foo: "bar"
        });
        this.dataService.addItem(item);
    }

}

全文： https ： //pastebin.com/aNrShiVj

转译的JS：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var secondclass_model_1 = require("~/shared/secondclass.model");
var data_service_1 = require("~/shared/data.service");
var TestComponent = (function () {
    function TestComponent(dataService) {
        this.dataService = dataService;
        // Use the component constructor to inject providers.
    }
    Object.defineProperty(TestComponent.prototype, "first", {
        get: function () {
            return this._first;
        },
        set: function (value) {
            this._first = value;
        },
        enumerable: true,
        configurable: true
    });
    ;
    Object.defineProperty(TestComponent.prototype, "second", {
        get: function () {
            return this._second;
        },
        set: function (value) {
            this._second = value;
        },
        enumerable: true,
        configurable: true
    });
    ;
    TestComponent.prototype.ngOnInit = function () {
    };
    TestComponent.prototype.itemTap = function (tickettype) {
        var item = new secondclass_model_1.SecondClass({
            foo: "bar"
        });
        this.dataService.addItem(item);
    };
    return TestComponent;
}());
__decorate([
    core_1.Input("first"),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [typeof (_a = typeof firstclass_model_1.FirstClass !== "undefined" && firstclass_model_1.FirstClass) === "function" && _a || Object])
], TestComponent.prototype, "first", null);
__decorate([
    core_1.Input("second"),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [typeof (_b = typeof secondclass_model_1.SecondClass !== "undefined" && secondclass_model_1.SecondClass) === "function" && _b || Object])
], TestComponent.prototype, "second", null);
TestComponent = __decorate([
    core_1.Component({
        selector: "test-component",
        moduleId: module.id,
        templateUrl: "./test.component.html",
        styleUrls: ['./test.component.css']
    }),
    __metadata("design:paramtypes", [typeof (_c = typeof data_service_1.DataService !== "undefined" && data_service_1.DataService) === "function" && _c || Object])
], TestComponent);
exports.TestComponent = TestComponent;
var _a, _b, _c;

https://pastebin.com/2KeE0c9p

Answer 1

下面是简化的示例：

// foo.ts
export class Foo {
    x: string;
}

// code.ts
import { Foo } from "./foo";

function MyDecorator(target: Object, key: PropertyKey) {}

class MyClass {
    @MyDecorator
    get myField() {
        return this._myField;
    }
    set myField(value: Foo) {
        this._myField = value;
    }
    private _myField: Foo;
}

使用TypeScript 2.9.2为我重现了问题，但没有使用TypeScript 3.1.3。 请尝试升级TypeScript。 （如果Angular阻止了您的TypeScript版本，那您似乎很幸运：Angular 7刚刚发布，支持TypeScript 3.1。）