ArcGis API 4.9上的自定义小部件创建错误

Question

我创建了一个小部件，但面临问题，在此我没有混合dijit / _WidgetBase：

这是我收到错误的行：  @viewmodel：SmallToggleButtonViewModel = new SmallToggleButtonViewModel（）;

I am using ArcGis 4.9
Below is whole code containing above line for understanding the flow:

从“ esri / widgets / support / widget”导入{vmEvent，renderable，tsx，accessibleHandler，join}；

import {
aliasOf,
subclass,
property,
declared
} from "esri/core/accessorSupport/decorators";

import Widget = require("esri/widgets/Widget");
import View = require("esri/views/View");
import SmallToggleButtonViewModel = require("./SmallToggleButtonViewModel");
import ToggleState = require("./ToggleState");

const i18nCommon_Alternative = {
tooltip1: "1",
tooltip2: "2",
title1: "T1",
title2: "T2"
}

const CSS: any = {
base: "esri-expand esri-widget",
noIcon: "",
container: "esri-expand__container",
panel: "esri-expand__panel",
button: "esri-widget-button",
text: "esri-icon-font-fallback-text"
};

@subclass("compass.widgets.SmallToggleButton")
class SmallToggleButton extends declared(Widget) {

public static toggleChangedEventName: string = SmallToggleButtonViewModel.toggleChangedEventName;

constructor(params?: any) {
super();
}

@Property()
@renderable()
public state: ToggleState = ToggleState.State1;
@Property()
@renderable()
tooltip1: string = "";
@Property()
@renderable()
tooltip2: string = "";
@Property()
@renderable()
title1: string = "";
@Property()

@renderable()
title2: string = "";

@Property()
@renderable()
esriIconFont1: string = "";

@Property()
@renderable()
esriIconFont2: string = "";

@Property()
@renderable()
titleVisible = false;

@renderable()
view: View = null;

vmEvent("smallToggleButtonClicked")
property({ type: SmallToggleButtonViewModel })
viewModel: SmallToggleButtonViewModel= new SmallToggleButtonViewModel();

@aliasOf("viewModel.toggle")
toggle(state: ToggleState): void {}

render() {
const isState1 = (this.state == ToggleState.State1);

const tooltip1Text = this.tooltip1 || i18nCommon_Alternative.tooltip1;
const tooltip2Text = this.tooltip2 || i18nCommon_Alternative.tooltip2;
const title1Text = this.title1 || i18nCommon_Alternative.title1;
const title2Text = this.title2 || i18nCommon_Alternative.title2;
const finalIconClass1 = this.esriIconFont1 || CSS.noIcon;
const finalIconClass2 = this.esriIconFont2 || CSS.noIcon;

const title = isState1 ? title1Text : title2Text;
const tooltip = isState1 ? tooltip1Text : tooltip2Text;

var iconStyle: string = "";
if (
    ((finalIconClass1.length == 0) && isState1)
    ||
    ((finalIconClass2.length == 0) && !isState1)
    ) {
    iconStyle += "display: none;";
}

const titleStyle: string = (iconStyle.length == 0) ? "display: none;" : "";

const expandIconClasses = {
    [finalIconClass1]: isState1 && (finalIconClass1.length > 0),
    [finalIconClass2]: !isState1 && (finalIconClass2.length > 0)
};

return (
    <div class={CSS.base}>

        <div class={CSS.container}>
            <div class={CSS.panel}>
                <div aria-label={tooltip} title={tooltip} role="button" tabindex="0" class={CSS.button} bind={this} onclick={this._toggle} onkeydown={this._toggle}>
                    <span aria-hidden="true" classes={expandIconClasses} style={iconStyle}></span>
                    <span style={titleStyle}>{title}</span>
                </div>
            </div>
        </div>
    </div>
);

Thanks,
Abhinav