使用 Typescript 设置 Knockout Extender (2018)答案

【问题标题】：Setting Up a Knockout Extender with Typescript (2018)使用 Typescript 设置 Knockout Extender (2018)
【发布时间】：2018-08-11 00:40:40
【问题描述】：

我正在尝试遵循此处列出的示例：Knockout typescript extenders

在每个文件中，我实际上都有一个自定义的KnockoutBindingHandler 也可以工作，所以我认为将绑定处理程序放在一边是合适的并且可以工作，但没有这样的运气。

我有一个customKoBindings.d.ts

import * as ko from "knockout"

interface KnockoutExtenders {
    logChange: (target: KnockoutObservable<any>) => KnockoutObservable<any>;
}

extensions.ts

/// <reference path="./customKoBindings.d.ts" />

import * as ko from "knockout"   

export class KnockoutExtensions {
    constructor() {
ko.extenders.logChange = function (target) {
            target.subscribe(function (newValue) {
                console.log(newValue);
            });
            return target;
        };
    }
}

Error TS2339 (TS) Property 'logChange' does not exist on type 'KnockoutExtenders'.

我看到someone 像这样引用他们的新扩展器：ko.extenders["logChange"]

但我仍然不能这样做：

this.end = ko.observable(end).extend({logChange});

Cannot find name "logChange"

是否有新的语法可以做到这一点，或者我只是错过了什么？

【问题讨论】：

标签： visual-studio typescript knockout.js knockout-2.0

【解决方案1】：

TypeScript 文件可以是“环境”或“模块”——模块是使用 import 或 export 的任何东西——你必须进行声明合并的方式取决于它是哪种类型的文件。

要合并模块中的声明，您必须使用declare 关键字。所以，你实际上有两种方法来解决这个问题......

1) 从声明文件中删除 import * as ko from "knockout"，以便将其解析为环境。

2) 在您的声明文件中，在interface 之前添加declare。

【讨论】：

【解决方案2】：

您可以使用 jquery extend() 函数来做同样的事情（假设您已将 jquery 导入为“jquery”）

jquery.extend(ko.extenders,
{
    logChange: function (target) {
        target.subscribe(function (newValue) {
            console.log(newValue);
        });
        return target;
    }
});

【讨论】：