close

Filter

loading table of contents...

Studio Developer Manual / Version 2404

Table Of Contents

5.2.1 Classes

As a start, compile a simple TypeScript class to Ext JS code. To enforce that it is treated as Ext TS code, the example class inherits from the Ext class Base, which is the base class of all Ext JS classes. To focus on how class features are translated, this example ignores import/export and the corresponding Ext JS code is slightly simplified.

TypeScript Ext JS
class SimpleClass extends Ext.Base {
  foo: string;
  #bar: number = 0;

  constructor(newBar: number) {
    super();
    this.#bar = newBar;
  }

  protected hook(): boolean {
    return false;
  }

  get bar(): number {
    return this.#bar;
  }

  set bar(value: number) {
    this.#bar = value;
  }

  static readonly FOO: any = "FOO";

  static #static = (() => {
    Registry.register(SimpleClass);
  })();
}
Ext.define("SimpleClass", function (SimpleClass) {
  return {
    extend: "Ext.Base",
    foo: undefined,
    bar$mgcE: 0,
    constructor: function (newBar) {
      Ext.Base.prototype.constructor.apply(this, arguments);
      this.bar$mgcE = newBar;
    },
    hook: function () {
      return false;
    },
    __accessors__: {
      bar: {
        get: function () {
          return this.bar$mgcE;
        },
        set: function (value) {
          this.bar$mgcE = value;
        }
      }
    },
    inheritableStatics: {
      FOO: "FOO",
      __initInheritableStatics__: function () {
        Registry.register(SimpleClass);
      }
    }
  };
});

Table 5.1.  TypeScript class to Ext JS example


This example illustrates the following mappings of ECMAScript/TypeScript features to Ext JS:

  • The ECMAScript class syntax is not supported by Ext JS. It uses the Ext.define() utility function to declare classes. This function receives the (fully-qualified) name of the class to define and a class descriptor object, or a function receiving the (not yet initialized) class object and returning the class descriptor object.

  • The ECMAScript class extends clause goes into the Ext class descriptor object's extend property and, instead of the super class itself, specifies the super class name.

  • ECMAScript class fields create an entry in the Ext class descriptor object. Simple initializer values go into the corresponding value. If there is no initializer, in Ext, such fields are initialized using undefined, so that at least the property is present.

  • The new ECMAScript private member syntax using the hash prefix (here: #bar) is not supported by Ext JS. The Jangaroo compiler simulates private members by renaming them. While this does not make them technically inaccessible, it avoids inadvertent name clashes in subclasses when the superclass introduces new private members.

    Jangaroo complements the private member name by a postfix $ plus a hash computed from the fully-qualified name of the containing class.

  • Like in normal TypeScript compilation, all TypeScript access modifiers (public, protected, private) generate no JavaScript code.

    All TypeScript type annotations (: SomeType) also generate no JavaScript code.

  • ECMAScript accessors are not supported by Ext JS, but its class system is extensible, so Jangaroo added a meta-property __accessors__ to define properties with custom get/set logic.

  • ECMAScript static class members are defined by the Ext JS meta-property inheritableStatics. Since static members are always inherited in ECMAScript, it is not possible to use Ext's (non-inheriting) statics from TypeScript. The value of inheritableStatics is a mapping from static member name to simple initial value.

    Ext JS initializes static members very early, so for custom static initialization logic (here: Registry.register(SimpleClass);), Jangaroo adds another meta-property __initInheritableStatics__, which specifies a function that is called later, when this class is used for the first time.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.