Studio Developer Manual / Version 2304
Table Of Contents
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
extendsclause goes into the Ext class descriptor object'sextendproperty 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.ES6’s concise method syntax is not supported by Ext JS, or to be more precise, by its accompanying build tool Sencha Cmd, so it is rewritten to a field with a function value.
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)staticsfrom TypeScript. The value ofinheritableStaticsis 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.
