In TypeScript, each class using the Ext Config System needs an additional interface that describes its Config options. The design goal for the representation of this Config interface is to only declare and document Config properties once, although they re-appear on the class itself. Also, we need to distinguish simple Configs and bindable Configs. Last but not least, Config objects usually only contain a subset of all possible properties.

Here, the TypeScript utility types Pick and Partial come in handy. Pick allows to pick a list of specified member declarations from another type. Partial creates a new type that is exactly like the source type, only that all members are optional, as if they were declared with ?.

All Config properties are declared in the class itself. "Simple" Config properties are just properties with an optional default value, while bindable Config properties must be specified as an accessor pair, typically encapsulating a private field. The additional Config type is then declared as an interface using the partial type of picking those Config properties from the class. By convention, we name this interface like the class, suffixed with Config.

import Component from "@jangaroo/ext-ts/Component";

interface MyClassConfig extends Partial<Pick<MyClass, "configOption1" | "configOption2">> {}

class MyClass extends Component {
  /**
   * Simple Config property.
   */
  configOption1: string = "foo";

  #configOption2: number[] = [42];
  /**
   * Bindable Config property.
   */
  get configOption2(): number[] {
    return this.#configOption2;
  }
  set configOption2(value: number[]) {
    this.#configOption2 = value;
  }

  constructor(config: MyClassConfig) {
    super(config);
  }
}

To also export the additional interface, the most straight-forward option seemed like using a named export. But this has disadvantages when using both the class and its Config type, because you need two import identifiers, especially when there is a name clash, because you need to rename both. So we decided to assign the Config type to the class, which can be done in TypeScript by declaring a "virtual" class member named Config.

          interface MyClassConfig ...

class MyClass ... {
  declare Config: MyClassConfig;
  ...
} 
          

This allows to access the Config type by importing the class and then use the utility type also called Config (import from @jangaroo/runtime/Config). As this pattern is followed by all classes using the Ext Config System, also the Ext framework components, we can complement the example by extending the superclass Config type:

import Config from "@jangaroo/runtime/Config";
import Component from "@jangaroo/ext-ts/Component";

interface MyClassConfig extends Config<Component>, Partial<Pick<MyClass, "configOption1" | "configOption2">> {}

...