How should I compile .ts files (typescript)?

[AlexS]

Hello Developers,
I am totally new to typescript, so I stated to read about it here

Learn TypeScript in 5 minutes - A tutorial for beginners

I went to the tracker app, deleted the app.ts. file and ran:

tsc app.ts

The file generated almost but not exactly the same as the app.js file that existed before:

# This patch file was generated by NetBeans IDE
# It uses platform neutral UTF-8 encoding and \n newlines.
--- a/js/app.js
 +++ b/js/app.js
@@ -22,7 +22,7 @@
      d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 };

})();
-Object.defineProperty(exports, “__esModule”, { value: true });
+exports.__esModule = true;
var egw_app_1 = require("…/…/api/js/jsapi/egw_app");
/**

• UI for tracker
  @@ -98,8 +98,7 @@
  • or null, if not triggered on server-side, which adds that info
    */
    trackerAPP.prototype.observer = function (_msg, _app, _id, _type, _msg_type, _links) {

•    var _a;
  

•    if (typeof ((_a = _links) === null || _a === void 0 ? void 0 : _a.tracker) != 'undefined') {
  

•    if (typeof (_links === null || _links === void 0 ? void 0 : _links.tracker) != 'undefined') {
         if (_app === 'timesheet') {
             var nm = this.et2 ? this.et2.getWidgetById('nm') : null;
             if (nm)
  

@@ -280,7 +279,7 @@
var data = egw.dataGetUIDdata(_selected[0].id);
if (assigned && data && data.data) {
et2.widgetContainer.getWidgetById(‘assigned_action[title]’).set_value(data.data.tr_summary);

•            et2.widgetContainer.getWidgetById('assigned_action[title]').set_class(data.data.class);
  

•            et2.widgetContainer.getWidgetById('assigned_action[title]').set_class(data.data["class"]);
             assigned.set_value(data.data.tr_assigned);
         }
     }
  

@@ -345,4 +344,3 @@
return trackerAPP;
}(egw_app_1.EgwApp));
app.classes.tracker = trackerAPP;
-//# sourceMappingURL=app.js.map
\ No newline at end of file

So I would like to ask if this is the correct way to compile the ts files
Thanks again and BR
Alex

[RalfBecker]

The difference is which module resolution TypeScript compiles for:

https://www.typescriptlang.org/docs/handbook/module-resolution.html

It’s configured in the tsconfig.json file in the root of EGroupware:

EGroupware/egroupware/blob/master/tsconfig.json

For PHPStorm you have to make some configuration to automatically compile TypeScript (taking our tsconfig file into account):

https://www.jetbrains.com/help/phpstorm/compiling-typescript-to-javascript.html

For Netbeans you also have to configure it and - I believe - install a plugin to support TS editing. Maybe @hadi.nategh who still uses NetBeans can share his configuration.

On the command line it should be enought to let tsc know about our config file:

cd /path/to/egroupware
rm tracker/js/app.js
tsc --build tsconfig.json

Ralf

[AlexS]

Hello Ralf,
thank you for this information. In Netbeans I found this https://github.com/Everlaw/nbts plugin. After installation you have to configure it via right click in a .ts file:

And then enter the path to the lib folder of …node_modules/typescript:

Also for some reason typescript was not installed in node_modules in my case so I installed it with:

npm install --save-dev typescript

Hope this helps people using Netbeans
BR
Alex