(TypeScript) 扩展 KnockoutObservableArray

Question

我想制作一个松散 MyKOArray<T> extends KnockoutObservableArray<T> 的 TypeScript class。这可能吗？如果是这样，有没有紧凑的方法来做到这一点？

我阅读了 Knockout 的 extenders 部分，但它似乎不适用，因为我正在尝试（除其他事项外）添加 state 属性——不影响现有的可订阅。
我可以列出我尝试过的事情以及它们出错的方式（例如 TS2507、TS2322 等），但我怀疑它们能否提供信息。作为基准，我认为一些基本细节是：
- KnockoutObservableArray 是一个接口，所以我真的需要 "extend" ko.observableArray（"factory" 函数）。
- ko.observableArray 的签名不正确（即没有 new 并且它处理函数中的初始值而不是 constructor 方法）。
- 我可以 return ko.observableArray(initial) 从构造函数中获取原型链（例如，方法不可用）。
- 我可以在 JS 中 override @@create 到 return ko.observableArray(initial)，但我很难找到一个 JS 示例（更不用说有效的 TS 实现了）。
我还找到了一个关于类似主题的 extremely old discussion。那里的结论是由于 KO 中缺乏原型设计是不可能的，但是当前的源代码（例如 ko.utils.setPrototypeOfOrExtend）表明这个结论可能已经过时了。
我还研究了大量通用 TS 扩展问题（例如），但没有找到似乎匹配的内容。

===

编辑：为什么？

我正在尝试使用以下模式分离我的系统（仅记录 "interesting case"）：

ViewModel 向数据服务发出请求（间接通过 class 上的工厂方法）。数据服务 returns 立即实例（MyClass 或 KnockoutObservableArray<MyClass> 分别用于 Singleton 或 Collection）。
异步地，服务loads/populates（并管理对返回实例的实时更新）。这需要为事件和 REST 调用订阅 WebSocket 以加载数据（包括重试的可能性）。
服务通过调用实例上的方法（我的模式中的 "callback" 和 "errback"）将其进度传递给实例。
这些方法更新 state 属性（即可观察的）并可能更新其他内容（例如填充其值或填充可观察的错误消息）。
UI 询问 state observable 以将加载（和其他活动）的状态传达给用户。

这在我的单个实例上运行良好。 state 方法被广泛询问（和更新）以确保有效的操作。

我想在我的 KOArrays 上复制图案。这样，我就可以区分尚未加载的空数组和恰好为空的已加载数组。我还可以向 KOArray 添加 state 和 error_message 以反映我的实例的行为。

Answer 1

总之，你描述的方式是不可能的。

长话短说

Knockout 不是以面向对象的方式实现的。所以基本上它公开的几乎所有东西都是函数或普通对象等。原型处理用于扩展例如 ko.observable 返回的函数实例。所以基本上 从任何类型的 Knockout 中继承 在 OOP 意义上是不可能的。

如果您需要继承来添加功能，您可以将新方法添加到 ko.observableArray.fn 对象。然后此函数将在之后的所有 observableArray 个实例上调用。这里有一个简单的例子。

ko.observableArray.fn.hasElements = function() {
  return this().length > 0;
}
...
if (myModel.selectedItems.hasElements()) {
  ...
}

如果你需要继承来限制某些东西，你可以像这样添加自己的工厂函数。

ko.myRestrictedObservableArray = function(initialValue) {
  if (!initialValue || !initialValue.length) {
    throw new "You can create an observable array only with a non-empty initial value";
  }

  return ko.observableArray(initialValue);
}

如果您愿意，您甚至可以覆盖原始函数，例如像这样。虽然，在大多数情况下这不是一个好的做法。

var _original = ko.observableArray;
ko.observableArray = function(initialValue) {
  // ... do your custom things
  var array = _original.call(this, initialValue);
  // ... do your custom things 
  return array;
}

如果您还有其他要求，请在您的问题中更详细地描述。

Answer 2

根据@Zoltan 的反馈，我最终采用了以下方法。我确信存在错误和优化的机会，但它让我可以在 Typescript class 中编写所有内容（在两个方向上进行适当的类型检查）：

在纯 JS 中（例如 HTML 文件或单独的 JS 文件中的 <script>）：

function RestCollection(initialValue) {
    const fn = ko.observableArray(initialValue);
    // Static properties
    ko.utils.extend(fn.constructor, RestCollectionMixin);
    // Methods (already constructed so must attach directly, not to prototype)
    const methods = Object.getOwnPropertyNames(RestCollectionMixin.prototype);
    for (let i=0; i<methods.length; i++) {
        if (methods[i] == "constructor") continue;  // don't move over the constructor
        fn[methods[i]] = RestCollectionMixin.prototype[methods[i]].bind(fn)
    }
    // Constructed properties
    ko.utils.extend(fn, new RestCollectionMixin());
    return fn;
} {}

// RestCollectionMixin needs this; don't return or it will break the constructor
function KnockoutObservableArrayClass() {}

在 TS 文件中：

// abstract is not passed to JS so this prevents misuse without breaking the RestCollection constructor
abstract class RestCollectionMixin<T> extends KnockoutObservableArrayClass<T> { // extends handles parent method access
    static FSM = class {
        static STATE_INIT = 'initializing';
        static STATE_READY = 'ready';
        static STATE_SAVING = 'save_requested';
        static STATE_DELETING = 'delete_requested';
        static STATE_DELETED = 'deleted';
        static STATE_ERROR = 'error';
    };
    public states() { // convenience accessor
        return this.constructor.FSM
    }
    public state:KnockoutObservable<string> = ko.observable(this.states().STATE_INIT);

    public processRestError(results) {
        this.state(this.states().STATE_ERROR)
        ...
    }
    ...
}

最后，RestCollection 和 KnockoutObservableArrayClass 的定义文件使 TS 检查有效：

// provide KnockoutObservableArray properties and methods to the Mixin
interface KnockoutObservableArrayClass<T> extends KnockoutObservableArray<T> {
    new<T>(initialValue): KnockoutObservableArray<T>
}
declare const KnockoutObservableArrayClass:KnockoutObservableArrayClass<any>;

// Define the focal class, capturing all extensions in RestCollectionMixin
interface RestCollection<T> extends RestCollectionMixin<T> {
    new<T>(initialValue): RestCollection<T>
}
declare const RestCollection:RestCollection<any>;

(TypeScript) 扩展 KnockoutObservableArray

(TypeScript) Extending KnockoutObservableArray

extends

knockout.js

typescript

长话短说