diff --git a/src/base/1.pane.js b/src/base/1.pane.js
index d628ae7bf..f613cbdd7 100644
--- a/src/base/1.pane.js
+++ b/src/base/1.pane.js
@@ -6,41 +6,44 @@
  * @extends BI.Widget
  * @abstract
  */
-BI.Pane = BI.inherit(BI.Widget, {
+import { shortcut } from "../core/decorator";
 
-    _defaultConfig: function () {
-        return BI.extend(BI.Pane.superclass._defaultConfig.apply(this, arguments), {
-            _baseCls: "bi-pane",
-            tipText: BI.i18nText("BI-No_Selected_Item"),
-            loadingText: "",
-            loadingSize: "small",
-            overlap: true,
-            onLoaded: BI.emptyFn,
-        });
-    },
+@shortcut()
+export class Pane extends BI.Widget {
+    static xtype = "bi.pane";
+    static EVENT_LOADED = "EVENT_LOADED";
+    static EVENT_LOADING = "EVENT_LOADING";
+
+    props = {
+        _baseCls: "bi-pane",
+        tipText: BI.i18nText("BI-No_Selected_Item"),
+        loadingText: "",
+        loadingSize: "small",
+        overlap: true,
+        onLoaded: BI.emptyFn,
+    }
 
-    _assertTip: function () {
-        var self = this, o = this.options;
+    _assertTip() {
         if (!this._tipText) {
             BI.createWidget({
                 type: "bi.absolute_center_adapt",
                 element: this,
                 items: [{
                     type: "bi.label",
-                    ref: function (_ref) {
-                        self._tipText = _ref;
+                    ref: (_ref) => {
+                        this._tipText = _ref;
                     },
                     cls: "bi-tips",
-                    text: o.tipText,
+                    text: this.options.tipText,
                     height: 25,
                 }],
             });
         }
-    },
-
-    loading: function () {
-        var self = this, o = this.options;
-        var loadingAnimation = BI.createWidget(BI.Providers.getProvider("bi.provider.system").getLoading({
+    }
+    
+    loading() {
+        const o = this.options;
+        const loadingAnimation = BI.createWidget(BI.Providers.getProvider("bi.provider.system").getLoading({
             loadingSize: o.loadingSize,
             context: this,
         }));
@@ -56,7 +59,7 @@ BI.Pane = BI.inherit(BI.Widget, {
                     element: BI.Layers.make(this.getName() + "-loading", this),
                 });
             }
-            BI.Layers.show(self.getName() + "-loading");
+            BI.Layers.show(this.getName() + "-loading");
         } else if (BI.isNull(this._loading)) {
             loadingAnimation.element.css("zIndex", 1);
             BI.createWidget({
@@ -66,17 +69,17 @@ BI.Pane = BI.inherit(BI.Widget, {
                 items: this._getLoadingTipItems(loadingAnimation),
             });
         }
-        self.fireEvent(BI.Pane.EVENT_LOADING);
+        this.fireEvent(Pane.EVENT_LOADING);
         this.element.addClass("loading-status");
-    },
+    }
 
-    _getSize: function (v) {
+    _getSize(v) {
         return Math.ceil(v / (this.options.loadingSize === "small" ? 2 : 1));
-    },
+    }
 
-    _getLoadingTipItems: function (loadingTip) {
-        var self = this, o = this.options;
-        var loadingTipItems = [{
+    _getLoadingTipItems(loadingTip) {
+        const o = this.options;
+        const loadingTipItems = [{
             type: "bi.horizontal_adapt",
             items: [loadingTip],
         }];
@@ -88,46 +91,43 @@ BI.Pane = BI.inherit(BI.Widget, {
 
         return [{
             type: "bi.vertical",
-            ref: function (_ref) {
-                self._loading = _ref;
+            ref: (_ref) => {
+                this._loading = _ref;
             },
             items: loadingTipItems,
         }];
-    },
+    }
 
-    loaded: function () {
-        var self = this, o = this.options;
-        BI.Layers.remove(self.getName() + "-loading");
+    loaded() {
+        BI.Layers.remove(this.getName() + "-loading");
         this._loading && this._loading.destroy();
-        o.onLoaded();
-        self.fireEvent(BI.Pane.EVENT_LOADED);
+        this.options.onLoaded();
+        this.fireEvent(Pane.EVENT_LOADED);
         this.element.removeClass("loading-status");
-    },
+    }
 
-    check: function () {
+    check() {
         this.setTipVisible(BI.isEmpty(this.options.items));
-    },
+    }
 
-    setTipVisible: function (b) {
+    setTipVisible(b) {
         if (b === true) {
             this._assertTip();
             this._tipText && this._tipText.setVisible(true);
         } else {
             this._tipText && this._tipText.setVisible(false);
         }
-    },
+    }
 
-    setTipText: function (text) {
+    setTipText(text) {
         this._assertTip();
         this._tipText.setText(text);
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.options.items = items || [];
         this.check();
-    },
-});
-BI.Pane.EVENT_LOADED = "EVENT_LOADED";
-BI.Pane.EVENT_LOADING = "EVENT_LOADING";
+    }
+}
 
-BI.shortcut("bi.pane", BI.Pane);
+BI.extend(BI, { Pane });
diff --git a/src/core/decorator.js b/src/core/decorator.js
new file mode 100644
index 000000000..23215d701
--- /dev/null
+++ b/src/core/decorator.js
@@ -0,0 +1,8 @@
+/**
+ * 注册widget
+ */
+export function shortcut() {
+    return function decorator(Target) {
+        BI.shortcut(Target.xtype, Target);
+    };
+}
diff --git a/tsconfig.json b/tsconfig.json
index 5630b275a..a964cc231 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,7 +20,8 @@
       "noUnusedParameters": true,
       "noImplicitReturns": true,
       "noFallthroughCasesInSwitch": true,
-      "emitDeclarationOnly": true
+      "emitDeclarationOnly": true,
+      "allowJs": true,
   },
   "include": [
       "typescript/*.ts",