Override Arrow Function in Child Class

问题

I use arrow functions in my classes instead of methods because they allow me to use the "this" keyword, and keep the "this" meaning the class itself, rather than the method.

I have an abstract class that defines an empty arrow function that is to be overridden by the child class. Correction, it was originally this:

abstract _configureMultiselect(): void;

but trying to override that with an arrow function caused this:

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

So I changed it to an empty arrow function in the parent class:

_configureMultiselect = () => {};

But when I try to override that, well, it just doesn't override it, so my _configureMultiselect in the child class is empty, when I obviously want it to have a function. Here is my code:

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);
                    }
                }
            };
        }
    }

How do I override _configureMultiselect in the child class successfully?

回答1:

How do I override _configureMultiselect in the child class successfully

Store it in a new member as superConfigureMultiselect and then use that later on.

More

Arrow function inheritance is covered here : https://basarat.gitbooks.io/typescript/content/docs/arrow-functions.html#tip-arrow-functions-and-inheritance 🌹

回答2:

I still don't know how to have an empty arrow function in the parent and override it in the child.

For my scenario I could remove the function altogether - it was superfluous. I only needed to override the multiselectConfiguration: Object; property.

来源：https://stackoverflow.com/questions/38368203/override-arrow-function-in-child-class