Project Description

This project aims to make small changes to the Typescript compiler to improve its ability to work with ExtJs.

There are two main types of changes that are made:

  1. Emitter changes - changes that affect the way in which typescript emits code.
  2. Syntax tree changes - changes that add extra items in the syntax tree whose existence is presumed by the framework, or which make development with the framework easier.

Both of these changes are opt-in. If you write standard TS code the compiler will emit the same JS as it does now. To trigger the extra compiler features you have to annotate syntax items with comments with the following format : /*@AnnotationName*/ 

 Example: Generating an ExtJsClass  

export class SimplePanel 
extends Ext.panel.Panel 
implements Ext.panel.IPanel {     /*@config*/ simpleConfigProperty: string = "Test";     constructor(cfg: ISimplePanel) {         super(cfg);     }     initComponent() {         super.initComponent();     } } var simplePanel = new SimplePanel({     title: "Test",     simpleConfigProperty: "My prop" });
Ext.define('dy.users.ui.SimplePanel', { 
    extend: "Ext.panel.Panel",
    constructor: function (cfg) {
    initComponent:function () {
    inject : {
    config : {
        /*@config*/ simpleConfigProperty:"Test"
    statics : {
var simplePanel = Ext.create('dy.users.ui.SimplePanel',{
    title: "Test",
    simpleConfigProperty: "My prop"

The /*@ExtJsClass*/ annotation will trigger the generation of ExtJs specific classes, and will also change code emitted for new statements.

The /*@ConfigInterface*/ annotation will trigger the creation of a hidden interface named IClassName that will contain all properties marked with the /*@config*/ annotation as optional memebers. This interface is the used in the constructor, thus allowing intelisense for configuration properties.

More information to come in the documentation soon.

Last edited Jul 16, 2014 at 5:03 PM by dragomirtitian, version 7