TypeScript + jQuery: про доступ к свойствам класса из обработчиков событий

Question

В своем проекте который я недавно начал, я решил использовать TypeScript + jQuery. Настроил динамическую загрузку скриптов с помощью systemJS, все очень круто. И вот первые грабли, есть у меня класс меню со св-вами menu, detailsMenuContainer, state, которые заполняются в конструкторе, и вешаются обработчики - внутри обработчиков они становятся недоступны, и тогда мне пришлось их сделать статичными:

export class Menu{

    private static menu;
    private static detailsMenuContainer;
    private static state :boolean = false;

    constructor(){
        Menu.menu = $(MENU);
        Menu.detailsMenuContainer = $(DETAILS_MENU_CONTAINER);
        fn.setOnDocumentListener('mousemove',MENU_EVENT_NAME,null,this.mousePosChecker);
    }

    public static showMenu(){
        Menu.state = true;
        Menu.menu.prop('class',ACTIVE_MENU_STATE_CLASS);
        Menu.detailsMenuContainer.prop('class',ACTIVE_MENU_STATE_CLASS);
    }

    public static hideMenu(){
        Menu.state = false;
        Menu.menu.prop('class',INACTIVE_MENU_STATE_CLASS);
        Menu.detailsMenuContainer.prop('class',INACTIVE_MENU_STATE_CLASS);
    }

    private mousePosChecker(e){
        let posX = e.clientX, posY = e.clientY, controlStateSize = CONTROL_STATE_INACTIVE;
        if(Menu.state) controlStateSize = CONTROL_STATE_ACTIVE;

        if(posY > CONTROL_TOP_STATE && posX < controlStateSize && !Menu.state){
            Menu.showMenu();
        }else if((posY < CONTROL_TOP_STATE || posX > controlStateSize) && Menu.state){
            Menu.hideMenu();
        }
    }
}

т.е. если они будут не static, то внутри обработчиков они будут undefined!

Объясните мне почему так происходит? И могу ли я каким-либо образом сделать их не статичными? Ведь это очень неудобно!!!

Answer 1

static считается дурным тоном в любом языке, за исключением некоторых ситуаций, когда их применение оправданно, как например в utils.
У Вас же проблема типичная для javascript, а точнее - налицо потеря контекста. Не буду перечислять все возможные способы его возврата, а покажу тот, который использую сам -

class SomeClass {
    private handler = ( event: Event ) => {
        // присваиваем свойству стрелочную функцию,
        // которая всегда сохраняет свой контекст.
    };
}

И когда я пишу на TypeScript, то обязательно использую по полному его возможности. Не указывая типов при объявлении и возврате, не строя архитектуру на интерфейсах Вы теряете возможность полноценного автокомплита, выявления большей части ошибок на этапе компиляции, постижения самой сути программирования. А самое главное что дает TypeScript js разработчику - развитие.

И как упомянули в комментариях, этот метод не будет являться методом прототипа, а будет создаваться в конструкторе. Хочу заметить что это не проблема ts, эта проблема js. Единственное о чем стоит напомнить, что есть некое правило, которое говорит что много кода в хендлере, это не очень хорошо. По этому нужно выносить всю логику по логическим слоям и проблема создания функций не будет так ужасна.