覆盖子类中的箭头函数答案

【问题标题】：Override Arrow Function in Child Class覆盖子类中的箭头函数
【发布时间】：2016-07-14 07:36:11
【问题描述】：

我在我的类中使用箭头函数而不是方法，因为它们允许我使用“this”关键字，并保持“this”表示类本身，而不是方法。

我有一个抽象类，它定义了一个空箭头函数，该函数将被子类覆盖。更正一下，原来是这样的：

abstract _configureMultiselect(): void;

但试图用箭头函数覆盖它会导致：

Class 'CategorySelect' defines instance member function '_configureMultiselect', but extended class 'SearchFilterCategorySelect' defines it as instance member property.
(property) Select.SearchFilterCategorySelect._configureMultiselect: () => void

所以我把它改成父类中的空箭头函数：

_configureMultiselect = () => {};

但是当我尝试覆盖它时，它只是没有覆盖它，所以我在子类中的_configureMultiselect 是空的，而我显然希望它有一个功能。这是我的代码：

interface ICategorySelect {
        multiselectConfiguration: Object;
        numberOfCategories: KnockoutObservable<number>;
        allSelected: KnockoutObservable<boolean>;
        selectedCategories: KnockoutObservableArray<Category>;
        categories: KnockoutObservableArray<Category>;
    }

    abstract class CategorySelect implements ICategorySelect {
        multiselectConfiguration: Object;
        numberOfCategories: KnockoutObservable<number>;
        allSelected: KnockoutObservable<boolean>;
        selectedCategories: KnockoutObservableArray<Category>;
        categories: KnockoutObservableArray<Category>;

        constructor() {
            this._configureMultiselect();
            this._instantiateCategories();
            this.numberOfCategories = ko.observable(7);
            this.allSelected = ko.observable(false);
        }

        _configureMultiselect = () => {};

        _instantiateCategories = () => {
            this.categories = ko.observableArray([
                new Category("Meat", 1), 
                new Category("Dairy", 2), 
                new Category("Confectionary", 3),
                new Category("Dessert", 4),
                new Category("Baking", 7),
                new Category("Grocers", 6),
                new Category("Restaurants", 5),
                new Category("Condiments", 8),
                new Category("beverages", 9),
            ]);
        }
    }

    export class SearchFilterCategorySelect extends CategorySelect {

        constructor() {
            super();
        }

        _configureMultiselect = () => {
            this.multiselectConfiguration = {
                buttonWidth: '100%',
                buttonContainer: '<div style="height: 64px;" />',
                buttonClass: 'none',
                nonSelectedText: "select categories",
                nSelectedText: ' thingymajigs',
                allSelectedText: "all of the things!!",
                selectAllNumber: false,
                includeSelectAllOption: true,
                disableIfEmpty: true,
                onSelectAll: () => {
                    this.allSelected(true);
                },
                onInitialized: () => {

                },
                onChange: (option, checked) => {
                    this.selectedCategories = ko.observableArray([]);
                    var self = this;

                    $('#category-select option:selected').each(function() {
                        self.selectedCategories.push(
                            <Category>($(this).text(), $(this).val())
                        )
                    });
                    console.log(this.selectedCategories());
                    if(this.selectedCategories().length < this.numberOfCategories()) {
                        this.allSelected(false);
                    }
                }
            };
        }
    }

如何成功覆盖子类中的_configureMultiselect？

【问题讨论】：

标签： inheritance typescript arrow-functions

【解决方案1】：

我仍然不知道如何在父级中有一个空箭头函数并在子级中覆盖它。

对于我的场景，我可以完全删除该功能 - 这是多余的。我只需要覆盖multiselectConfiguration: Object; 属性。

【讨论】：

【解决方案2】：

如何成功覆盖子类中的_configureMultiselect

将其存储为superConfigureMultiselect 的新成员，然后再使用它。

箭头函数继承在这里介绍：https://basarat.gitbook.io/typescript/future-javascript/arrow-functions#tip-arrow-functions-and-inheritance?

【讨论】：

无法让它工作。你能做一个适用于我的代码的代码示例吗？我的代码与您答案中的链接不同，因此它并不真正适用。在链接中，父方法有一个实现
找不到页面。

更多