Как преобразовать этот пример в класс typecirpt?

Question

В настоящее время я разрабатываю приложение для плагина H5P. Поскольку мне нужно что-то разработать для редактора H5P, я нашел эту документацию о том, как реализовать виджет.

      /**
 * Color selector widget module
 *
 * @param {H5P.jQuery} $
 */
H5PEditor.widgets.colorSelector = H5PEditor.ColorSelector = (function ($) {
 
  /**
   * Creates color selector.
   *
   * @class H5PEditor.ColorSelector
   *
   * @param {Object} parent
   * @param {Object} field
   * @param {string} params
   * @param {H5PEditor.SetParameters} setValue
   */
  function C(parent, field, params, setValue) {
    this.parent = parent;
    this.field = field;
    this.params = params;
    this.setValue = setValue;
  }
   
  /**
   * Append the field to the wrapper.
   *
   * @param {H5P.jQuery} $wrapper
   */
  C.prototype.appendTo = function ($wrapper) {};
 
  /**
   * Validate the current values.
   *
   * @returns {boolean}
   */
  C.prototype.validate = function () {};
 
  /**
   * Remove the current field
   */
  C.prototype.remove = function () {};
 
  return C;
})(H5P.jQuery);

Поскольку мне нужно использовать другие классы, которые я уже написал в машинописном тексте, я хотел бы оставаться последовательным в использовании выбранных мной языков программирования. Я особенно старался обдумать первую и последнюю строчки реального кода: нужно ли мне объявлять два класса с одинаковым содержимым? Если честно, такого сооружения я еще не видел.

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

Заранее большое спасибо!

Answer 1

То, что вы видите там, называется самозапускающейся функцией (или немедленно вызываемой функцией). Он запускается немедленно, не используя глобальное пространство имен, что сохраняет его чистоту. В последней строке он получает ссылку на jQuery из глобального пространства имен, поэтому его можно использовать внутри функции.

Здесь эта функция используется для заполнения глобального объекта H5PEditor виджетом редактора (вы можете назвать его классом, хотя это не совсем точно), чтобы его можно было использовать позже. Эта функция возвращает ссылку, присвоенную этим двум свойствам, которые вы заметили. По сути, это то, что вы делаете, если в настоящее время предпочитаете использовать обозначение где C будет constructor функция.

Я не совсем уверен, но думаю, что использование двух ссылок на эту функцию (класс) на самом деле не обязательно. Первого должно хватить для H5P, но здесь я могу ошибаться.

Если вы используете машинописный текст, то я предполагаю, что вы настроили некоторую цепочку сборки, включая Babel и т. Д. В этом случае вам может помочь просмотр https://github.com/otacke/h5p-editor-boilerplate. уже. По сути, это то, что вы опубликовали выше, используя class нотацию и цепочку сборки webpack / npm, в которую вы можете легко добавить TypeScript.