Angular decorator “class” not imported by typescript

Question

I'm developing an angular app, and struggle with a class that is only used in a decorator. The file is not imported by the transpiled source. It is most likely optimized away in the typescript compiler because it is used only in the decorator. However the "imported" variable is used in the metadata even though it is never declared (note the `typeof firstclass_model_1.FirstClass´ in the JS on line 46 where firstclass_model_1 is not defined).

Is this a bug in Typescript or Angular?

I can work around it by using the FirstClass in the typescript source.

Typescript source:

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

}

Full source: https://pastebin.com/aNrShiVj

Transpiled 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

The following simplified example:

// 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;
}

reproduces the problem for me with TypeScript 2.9.2, but not with TypeScript 3.1.3. Please try upgrading TypeScript. (If your TypeScript version had been held back by Angular, it looks like you're in luck: Angular 7 has just been released with support for TypeScript 3.1.)