Knockout和TypeScript：在组件注册中使用泛型类

Question

我使用了打字稿（3.4.0）和打字稿，我遇到的问题是我无法通过普通类型的视图模型注册淘汰组件。在这种情况下有没有办法使用泛型类？

ko.components.register("button-update", {
    viewModel: ButtonViewModel<UpdateButtonBehavior>,
    template: /**/
});

export class ButtonViewModel<T extends ButtonBehavior> {
    constructor(opts) { /**/ }
}

export abstract class ButtonBehavior {}

export class UpdateButtonBehavior extends ButtonBehavior {}

更新

问题是打字稿编译器显示错误：＆＃34;运算符＆lt;不能应用于类型ButtonViewModel和UpdateButtonBehavior＆gt;。

我的目标是使用从ButtonBehavior

派生的自定义行为注册一些不同的按钮

ko.components.register("button-save", {
    viewModel: ButtonViewModel<SaveButtonBehavior>,
    template: /**/
});

ko.components.register("button-delete", {
    viewModel: ButtonViewModel<DeleteButtonBehavior>,
    template: /**/
});

，其中

export class SaveButtonBehavior extends ButtonBehavior {}

export class DeleteButtonBehavior extends ButtonBehavior {}

Answer 1

T适用于

类型

ko.components.register("button-update", {
    viewModel: ButtonViewModel<UpdateButtonBehavior>,
    template: /**/
});

export class ButtonViewModel<T> extends ButtonBehavior { /**/ }

export abstract class ButtonBehavior {
    constructor(opts) { /**/ }
}

export class UpdateButtonBehavior {
    constructor(opts) { /**/ }
}

Answer 2

敲除组件注册的第二个参数，表示ViewModel必须是以下3个选项之一：

• 构造函数
• 共享对象实例
• createViewModel工厂函数

（见http://knockoutjs.com/documentation/component-registration.html#specifying-a-viewmodel）

通过使用ButtonViewModel<SaveButtonBehavior>，您尝试为其分配类型，这只是Typescript已知且没有等效的Javascript。

解决方案1：省略特定类型

ko.components.register("button-save", {
    viewModel: ButtonViewModel,
    template: /**/
});

ko.components.register("button-delete", {
    viewModel: ButtonViewModel,
    template: /**/
});

解决方案2：设置createViewModel工厂函数

ko.components.register('button-save', {
    viewModel: {
        createViewModel: function(params, componentInfo) {
            return new ButtonViewModel<SaveButtonBehavior>(params);
        }
    },
    template: /**/
});

ko.components.register('button-delete', {
    viewModel: {
        createViewModel: function(params, componentInfo) {
            return new ButtonViewModel<DeleteButtonBehavior>(params);
        }
    },
    template: /**/
});

解决方案3：为每种类型

创建单个对象实例

请注意，此方案仅在您只想创建每种类型的单个组件时才有效，非常不可能。

ko.components.register('button-save', {
    viewModel: { 
        instance: new ButtonViewModel<SaveButtonBehavior>();
    },
    template: /**/
});

ko.components.register('button-delete', {
    viewModel: {
        instance: new ButtonViewModel<DeleteButtonBehavior>();
    },
    template: /**/
});