Как использовать метод другого класса и этот контекст в методе типа?

Я хочу переписать JavaScript-метод далее в TypeScript. Я испытываю соблазн сделать это как класс, например:

// export default class 
export default class GroupItemMetadataProvider1
{
    protected m_instance;
    protected _grid;
    protected _defaults;

    protected m_options;
    constructor(options)
    {
        this.m_instance = this;

        this._defaults = {
            groupCssClass: "slick-group",
            groupTitleCssClass: "slick-group-title",
            totalsCssClass: "slick-group-totals",
            groupFocusable: true,
            totalsFocusable: false,
            toggleCssClass: "slick-group-toggle",
            toggleExpandedCssClass: "expanded",
            toggleCollapsedCssClass: "collapsed",
            enableExpandCollapse: true,
            groupFormatter: this.defaultGroupCellFormatter,
            totalsFormatter: this.defaultTotalsCellFormatter
        };

        options = $.extend(true, {}, this._defaults, options);
        this.m_options = options;
    }


    protected defaultGroupCellFormatter(row, cell, value, columnDef, item)
    {
        if (!this.m_options.enableExpandCollapse)
        {
            return item.title;
        }

        let indentation = item.level * 15 + "px";

        return "<span class='" + this.m_options.toggleCssClass + " " +
            (item.collapsed ? this.m_options.toggleCollapsedCssClass : this.m_options.toggleExpandedCssClass) +
            "' style='margin-left:" + indentation + "'>" +
            "</span>" +
            "<span class='" + this.m_options.groupTitleCssClass + "' level='" + item.level + "'>" +
            item.title +
            "</span>";
    }


    protected defaultTotalsCellFormatter(row, cell, value, columnDef, item)
    {
        return (columnDef.groupTotalsFormatter && columnDef.groupTotalsFormatter(item, columnDef)) || "";
    }


    protected init(grid)
    {
        this._grid = grid;
        this._grid.onClick.subscribe(this.handleGridClick);
        this._grid.onKeyDown.subscribe(this.handleGridKeyDown);
    }


    protected destroy()
    {
        if (this._grid)
        {
            this._grid.onClick.unsubscribe(this.handleGridClick);
            this._grid.onKeyDown.unsubscribe(this.handleGridKeyDown);
        }
    }


    protected handleGridClick(e, args)
    {
        let context = (<any>this);

        let item = context.getDataItem(args.row);
        if (item && item instanceof Slick.Group && $(e.target).hasClass(this.m_options.toggleCssClass))
        {
            let range = this._grid.getRenderedRange();
            context.getData().setRefreshHints({
                ignoreDiffsBefore: range.top,
                ignoreDiffsAfter: range.bottom + 1
            });

            if (item.collapsed)
            {
                context.getData().expandGroup(item.groupingKey);
            } else
            {
                context.getData().collapseGroup(item.groupingKey);
            }

            e.stopImmediatePropagation();
            e.preventDefault();
        }

    }


    // TODO:  add -/+ handling
    protected handleGridKeyDown(e)
    {
        let context = (<any>this);

        if (this.m_options.enableExpandCollapse && (e.which == Slick.keyCode.SPACE))
        {
            let activeCell = context.getActiveCell();
            if (activeCell)
            {
                let item = context.getDataItem(activeCell.row);
                if (item && item instanceof Slick.Group)
                {
                    let range = this._grid.getRenderedRange();
                    context.getData().setRefreshHints({
                        ignoreDiffsBefore: range.top,
                        ignoreDiffsAfter: range.bottom + 1
                    });

                    if (item.collapsed)
                    {
                        context.getData().expandGroup(item.groupingKey);
                    } else
                    {
                        context.getData().collapseGroup(item.groupingKey);
                    }

                    e.stopImmediatePropagation();
                    e.preventDefault();
                }
            }
        }

    }

    public getGroupRowMetadata(item)
    {
        return {
            selectable: false,
            focusable: this.m_options.groupFocusable,
            cssClasses: this.m_options.groupCssClass,
            columns: {
                0: {
                    colspan: "*",
                    formatter: this.m_options.groupFormatter,
                    editor: null
                }
            }
        };
    }

    public getTotalsRowMetadata(item)
    {
        return {
            selectable: false,
            focusable: this.m_options.totalsFocusable,
            cssClasses: this.m_options.totalsCssClass,
            formatter: this.m_options.totalsFormatter,
            editor: null
        };
    }
}

Однако handleGridClick & handleGridKeyDown ссылаются на "this" "event-context", а также на "this" class-context для получения параметров.

Проблема в том, что я не могу просто связать это в конструкторе, потому что в противном случае этот контекст объекта неверен. Как я могу это сделать?

Это простой вариант JavaScript:

// import $ from '../../wwwroot/jQuery-3.3.js';
import Slick from './slick.core.js';

export default GroupItemMetadataProvider;

/***
 * Provides item metadata for group (Slick.Group) and totals (Slick.Totals) rows produced by the DataView.
 * This metadata overrides the default behavior and formatting of those rows so that they appear and function
 * correctly when processed by the grid.
 *
 * This class also acts as a grid plugin providing event handlers to expand & collapse groups.
 * If "grid.registerPlugin(...)" is not called, expand & collapse will not work.
 *
 * @class GroupItemMetadataProvider
 * @module Data
 * @namespace Slick.Data
 * @constructor
 * @param options
 */
function GroupItemMetadataProvider(options)
{
    let _grid;
    let _defaults = {
        groupCssClass: "slick-group",
        groupTitleCssClass: "slick-group-title",
        totalsCssClass: "slick-group-totals",
        groupFocusable: true,
        totalsFocusable: false,
        toggleCssClass: "slick-group-toggle",
        toggleExpandedCssClass: "expanded",
        toggleCollapsedCssClass: "collapsed",
        enableExpandCollapse: true,
        groupFormatter: defaultGroupCellFormatter,
        totalsFormatter: defaultTotalsCellFormatter
    };

    options = $.extend(true, {}, _defaults, options);

    function defaultGroupCellFormatter(row, cell, value, columnDef, item)
    {
        if (!options.enableExpandCollapse)
        {
            return item.title;
        }

        let indentation = item.level * 15 + "px";

        return "<span class='" + options.toggleCssClass + " " +
            (item.collapsed ? options.toggleCollapsedCssClass : options.toggleExpandedCssClass) +
            "' style='margin-left:" + indentation + "'>" +
            "</span>" +
            "<span class='" + options.groupTitleCssClass + "' level='" + item.level + "'>" +
            item.title +
            "</span>";
    }

    function defaultTotalsCellFormatter(row, cell, value, columnDef, item)
    {
        return (columnDef.groupTotalsFormatter && columnDef.groupTotalsFormatter(item, columnDef)) || "";
    }

    function init(grid)
    {
        _grid = grid;
        _grid.onClick.subscribe(handleGridClick);
        _grid.onKeyDown.subscribe(handleGridKeyDown);
    }

    function destroy()
    {
        if (_grid)
        {
            _grid.onClick.unsubscribe(handleGridClick);
            _grid.onKeyDown.unsubscribe(handleGridKeyDown);
        }
    }

    function handleGridClick(e, args)
    {
        let item = this.getDataItem(args.row);
        if (item && item instanceof Slick.Group && $(e.target).hasClass(options.toggleCssClass))
        {
            let range = _grid.getRenderedRange();
            this.getData().setRefreshHints({
                ignoreDiffsBefore: range.top,
                ignoreDiffsAfter: range.bottom + 1
            });

            if (item.collapsed)
            {
                this.getData().expandGroup(item.groupingKey);
            } else
            {
                this.getData().collapseGroup(item.groupingKey);
            }

            e.stopImmediatePropagation();
            e.preventDefault();
        }
    }

    // TODO:  add -/+ handling
    function handleGridKeyDown(e)
    {
        if (options.enableExpandCollapse && (e.which == Slick.keyCode.SPACE))
        {
            let activeCell = this.getActiveCell();
            if (activeCell)
            {
                let item = this.getDataItem(activeCell.row);
                if (item && item instanceof Slick.Group)
                {
                    let range = _grid.getRenderedRange();
                    this.getData().setRefreshHints({
                        ignoreDiffsBefore: range.top,
                        ignoreDiffsAfter: range.bottom + 1
                    });

                    if (item.collapsed)
                    {
                        this.getData().expandGroup(item.groupingKey);
                    } else
                    {
                        this.getData().collapseGroup(item.groupingKey);
                    }

                    e.stopImmediatePropagation();
                    e.preventDefault();
                }
            }
        }
    }

    function getGroupRowMetadata(item)
    {
        return {
            selectable: false,
            focusable: options.groupFocusable,
            cssClasses: options.groupCssClass,
            columns: {
                0: {
                    colspan: "*",
                    formatter: options.groupFormatter,
                    editor: null
                }
            }
        };
    }

    function getTotalsRowMetadata(item)
    {
        return {
            selectable: false,
            focusable: options.totalsFocusable,
            cssClasses: options.totalsCssClass,
            formatter: options.totalsFormatter,
            editor: null
        };
    }

    function getOptions()
    {
        return options;
    }


    return {
        init,
        destroy,
        getGroupRowMetadata,
        getTotalsRowMetadata,
        getOptions
    };
}

Ответы

Ответ 1

Это скорее javascript, чем вопрос с машинописными текстами.

В примере 1 вы пытаетесь использовать "шаблон класса", в примере 2 вы используете что-то вроде "класса закрытия" (это имя для этого шаблона, который я не помню).

Оба шаблона записываются в TS, и я лично предпочитаю держать "класс закрытия" (пример 2). Таким образом, вы можете просто сохранить свой код и добавить аннотации типов. Включите strict: true и дайте аннотации типа тому, что компилятор кричит, что у вас "подразумевается любой тип".

личное мнение

Шаблон nr.2 обычно более прост в обслуживании (источники?), Шаблон 1 сложнее рефакторировать, требует больше аннотаций типа, больше мышления и дает вам место для this проблемы привязки. Вы все равно хотите использовать шаблон 1 для работы с высокой интенсивностью (например, игра, которая, кажется, не относится к вашему случаю), кроме этого, шаблон 2 - ваш путь. Даже классические случаи ООП (расширение класса и переопределение метода) легко доступны по варианту 2 (шаблон мешка для опций).

Типовая система типов является структурной - более мощной, чем "классическая" java/С#, и классы не являются номинальными в TS. Это еще две причины не использовать классы. class A {} и class B {} или любой объект можно присваивать, если они имеют одинаковые свойства.

EDIT: об этой связанной проблеме

Если вы действительно хотите придерживаться ehh... classes...

Вы не можете, чтобы this было 2 вещи одновременно. Если this ваш класс, вы можете найти свой элемент через event.target. Если this было отскоком к элементу... О, хорошо.
Поэтому вам нужно вызвать что-то вроде element.addEventListener("click", Instance.doSomething.bind(this)). addEventListener повторной привязки вашей функции this. .bind говорит: нет.
Или element.addEventListener("click", (...i) => Instance.doSomething(...i))
Если ваш метод действительно предназначен для вызова из других this контекста, а затем написать что - то вроде

метод (это: HTMLInputElement, x: число, y: строка) {}

this не что иное, как вид скрытого параметра функции (например, python и lua явно отправляют это как 1-й параметр), который перекрывается onX, что является одной из проблем с миллиардом долларов JS, которая является одной из причины, по которым классы JS сосать.

Ответ 2

Не совсем уверен, что я правильно понял вашу проблему, но, думаю, вы говорите, что обработчик событий ссылается на неправильный объект.

Вы должны сохранить свой контекст/область вне события, тогда вы можете ссылаться на нее внутри, как это

class GroupItemMetadataProvider1
{
    function init(grid)
    {
        let context = this;
        _grid = grid;
        _grid.addEventListener('click', (e, args) => context.handleGridClick(e, args));
        _grid.onKeyDown.subscribe(handleGridKeyDown);
    }

    function handleGridClick(e, args)
    {
        console.log(this); // will reference GroupItemMetadataProvider1
    }
}

Ответ 3

Используйте функцию стрелки, которая фиксирует this из контекста объявления и передает в контексте события как аргумент, используя вспомогательную функцию. Вспомогательная функция примет событие, чтобы подписаться на него и будет подталкивать подписку в массиве, чтобы упростить отмену подписки на все события.

subscriptions: Array<{ unsubscribe: () => any; }> = []
bindAndSubscribe<TArg1, TArg2>(target: {
    subscribe(fn: (e: TArg1, data: TArg2) => any)
    unsubscribe(fn: (e: TArg1, data: TArg2) => any)
}, handler: (context: any, e: TArg1, arg: TArg2) => void) {
    let fn = function (e: TArg1, arg: TArg2) { handler(this, e, arg) };
    target.subscribe(fn);
    this.subscriptions.push({
        unsubscribe: () => target.unsubscribe(fn)
    });

}
protected init(grid: Slick.Grid<any>)
{
    this._grid = grid;
    // note paramters a and e are inffred correctly, if you ever want to add types
    this.bindAndSubscribe(this._grid.onClick, (c, e, a)=> this.handleGridClick(c, e, a));
    this.bindAndSubscribe(this._grid.onKeyDown, (c,e, a) => this.handleGridKeyDown(c,e));
}


protected destroy()
{
    if (this._grid)
    {
        this.subscriptions.forEach(s=> s.unsubscribe());
    }
}



protected handleGridClick(context, e, args)
{ 
    // correct this
    this.m_options.toggleCssClass
    //...
}


protected handleGridKeyDown(context, e)
{
    // Correct this, context is a parameter
    //...
}

Вы также можете объявить обработчики непосредственно как функции стрелок, любой подход будет работать:

protected init(grid: Slick.Grid<any>)
{
    this._grid = grid;
    // Arrow function not needed here anymore, the handlers capture this themselves.
    this.bindAndSubscribe(this._grid.onClick, this.handleGridClick);
    this.bindAndSubscribe(this._grid.onKeyDown, this.handleGridKeyDown);
}




protected handleGridClick = (context, e, args) => 
{ 
    // correct this
    this.m_options.toggleCssClass
    //...
}


protected handleGridKeyDown = (context, e) => 
{
    // Correct this, context is a parameter
    //...
}

Ответ 4

Как объясняется в этом связанном ответе ES6, эта проблема сохраняется в старых библиотеках JavaScript (D3 и т.д.), Которые полагаются на динамическое this в обработчиках событий вместо передачи всех необходимых данных в качестве аргументов.

Те же решения применяются и к TypeScript, с необходимостью поддерживать безопасность типов.

Одним из решений является использование старого self = this рецепта, который устарел с помощью стрелок ES6, но по-прежнему необходим в этой ситуации и имеет некоторый запах:

handleGridKeyDown(context: DynamicThisType, e: any) {
    // class instance is available as 'this'
    // dynamic 'this' is available as 'context' param
}

...

const self = this;
this._grid.onKeyDown.subscribe(function (this: DynamicThisType, e: any) {
  return self.handleGridKeyDown(this, e);
});

Другим решением является применение этого рецепта к определенным методам с помощью декоратора TypeScript, это также приводит к методу, который имеет экземпляр класса как this и динамический this как параметр context:

function bindAndPassContext(target: any, prop: string, descriptor?: PropertyDescriptor) {
    const fn = target[prop];

    return {
        configurable: true,
        get: function () {
            const classInstance = this;
            function wrapperFn (...args) {
                return fn.call(classInstance, this, ...args);
            }

            Object.defineProperty(this, prop, {
                configurable: true,
                writable: true,
                value: wrapperFn
            });

            return wrapperFn;
        }
    };
}

...

@bindAndPassContext
handleGridKeyDown(context: DynamicThisType, e: any) {
    // class instance is available as 'this'
    // dynamic 'this' is available as 'context' param
}


...

this._grid.onKeyDown.subscribe(this.handleGridKeyDown);