How to transform this example into a TypeScript class?

Question

I am currently developing an application for the H5P plug in. As I need to develop something for the H5P editor, I found this documentation on how to implement a widget.

/**
 * 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);

Since I need to use other classes I already wrote in typesript, I would like to stay consistent in the use of my chosen programming languages. I especially tried to wrap my head around the first and last line of actual code: Do I have to declare two classes with the same contents? To be honest, I've never seen such a construction before.

I would be very thankful for some hints, how to translate this example into typescript correctly. You may also drop some concepts, of how for example to name this construction.

Thank you very much in advance!

Oliver Tacke · Answer 1 · 2021-08-20T16:01:40.000

What you see there is called a self-invoking function (or immediately invoked function). It runs immediately while not using the global namespace thus keeping it clean. In the last line, it gets the reference to jQuery from the global namespace, so it can be used inside the function.

Here, that function is used to populate the global H5PEditor object with the editor widget (you could call it class although that's not precise) so it can be used later. That function returns the reference to C which is assigned to these two properties that you noticed. It's essentially what you're doing if you're nowadays rather using the class notation where C would be the constructor function.

I am not entirely sure, but I think using two references to that function (class) is in fact not strictly necessary. The former should suffice for H5P, but I can be wrong here.

If you're using typescript, then I assume you've set yourself up some build chain including Babel, etc. In that case, having a look at https://github.com/otacke/h5p-editor-boilerplate should help you already. It's essentially what you posted above using class notation and with a webpack/npm build chain that you can easily add TypeScript to.

How to transform this example into a TypeScript class?

1 Answers1