Как динамически добавить метод в класс, внутри этого же класса?

Question

[Алексей Голубев]

Я в одном из методов класса хочу динамически создавать новые методы, названия которых, также, создаются в процессе работы.

initDOMListeners() {
    this.listeners.forEach(list => {
      const method = capitalize(list)
      this[method] =  this[method].bind(this)
      this.$root.on(list, this[method])
    })
  }

На this[method] ругается: Элемент неявно имеет тип "any", так как выражение типа "string" не может использоваться для индексации типа "DomListener(мой класс)".
В типе "DomListener" не обнаружена сигнатура индекса с параметром типа "string".:
Как можно решить эту проблему?

Comments

[ned4ded]

initDOMListeners() {
    this.listeners.forEach(list => {
      const method = capitalize(list)
      this[method] =  this[method].bind(this)
      // ^^^^^^^^^^^^^^^^^^^^^^^^  
      // что ты пытаешься сделать здесь? 
      // Забиндить существующий на этом классе метод на этот же класс? Зачем?

      this.$root.on(list, this[method])
    })
  }

А в целом ошибка выпадает верная, неизвестно же, какие именно строки будут в массиве listeners, неизвестно, какие имеено значения будут возвращены из capitalize, вот он и показывает тебе ошибку типизации. Статическая же типизация

[Алексей Голубев]

ned4ded, Это для наследующихся классов. Когда в наследуемых классах вызывается метод, который я добавляю таким способом, this инициализируется неправильно, то есть не на тот класс, в котором выполняется метод. А так я биндю методы под класс, в котором они будут выполняться.

[ned4ded]

this[method] = this[method].bind(this)
Если будет передана строка с названием метода, которого на текущем классе нет, то твой код упадет с ошибкой

ты делаешь что-то нерпавильно, скинь полный пример кода с наследованеим и тп

[Алексей Голубев]

export class DomListener { // abstract class
  $root: Dom
  listeners: Array<string>
  constructor($root: Dom, listeners = []) {
    if (!$root) {
      throw new Error(`no ${$root}`)
    }
    this.$root = $root
    this.listeners = listeners
  }

  initDOMListeners() {
    this.listeners.forEach(list => {
      const method = capitalize(list)
      this[method] = this[method].bind(this)
      this.$root.on(list, this[method])
    })
  }

Потом класс SliderComponent наследуется от этого класса.
Затем компоненты:

export class Scale extends SliderComponent {
  static className = 'slider__scale'
  constructor(emitter, $root, values) {
    super(emitter, $root, {
      name: 'scale',
      listeners: ['click']
    }, values)
  }

Onclick() {} // Этот метод доступен благодаря initDomListeners

* Этот класс не переведен в TS

Т.е. я передаю в компоненты массив listeners(click), он с помощью функции capitalize делает onClick, биндю в тот компонент, где это выполняется, с помощью функции on(addEventListeners) добавляю этот метод в класс. Просто декомпозиция логики, чтобы не громоздить в компоненты

В чистом js все работает отлично и красиво) Вот переписываю на TS и не могу добавить метод

[Алексей Голубев]

ned4ded, Конечно, это можно сделать в компоненте, без проблем, но хотелось бы оставить так.

[ned4ded]

В чистом js все работает отлично и красиво) Вот переписываю на TS и не могу добавить метод

Еще бы, но если кто-то будет пытаться вникнуть в твоей код после тебя, то вряд ли поймет, как это работает

Во первых, неявное объявление метода - это плохо и это противоречит статической типизации.

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

В третьих, у тебя нарушается SRP принцип, в данном случае лучше использовать композицию.

В связи с чем я предлагаю тебе переделать класс DomListener, чтобы он принимал только root при инициализации, и имел метод on(eventName, eventHandler), в этом методе DomListner будет регистрировать на $root функцию eventHandler. В SliderComponent ты можешь реализовать механизм создания переменной domListener (а не наследования от DomListener).

В Scale ты будешь делать тоже самое, что и сейчас, но только явно:

export class Scale extends SliderComponent {
    static className = 'slider__scale'
    constructor($root, values) {
        super(emitter, $root, values);
        
        this.domListener.on('click', this.Onclick)
    }

    Onclick() {}
}

Btw, в js названия методов принято начинать с маленькой буквы

Конечно, это можно сделать в компоненте, без проблем, но хотелось бы оставить так.

Ты вряд ли сможешь обойти на ts это ограничение, можешь добавить комментарий @ts-expect-error, перед той строкой, где ошибка выпадает, но это полумера.

[Алексей Голубев]

ned4ded, Спасибо! Буду исправлять!

Answer 1

[Aetae]

В typescript нельзя изменять существующий класс. Класс - законченная сущность. Конец.

С помощью наследования ты можешь добавить новые методы в новый класс-наследник.

И конечно, ты можешь захакать что угодно, что возможно в javascript, принудительно в обход ts, но ts об этом знать не будет и, соответственно, никакой типизации.