打字機未導入角裝飾器“類”

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。）