umbraco#5215 - Set up the initial build for typescript

I have rewritten the notificationsService and the AngularHelper (used by the NotificationsService) in Typescript. This gives a very good example of how the notificationsService can reference a concrete type even though the angularHelper is being injected in the constructor.

Open the Umbraco.Web.UI.Client in an editor that supports Typescript, such as VS Code or Atom.

In Umbraco.Web.UI.Client, run npm install.  Then run "npm run dev" and it will do the following:
1. Compile the typescript into Umbraco.Web.UI.Client/src/common/services/build/temp/, into their respective files such as notifications.service.js
2. The existing JS build picks up the compiled JS files and merges them into umbraco.services.js, then is saved in Umbraco.Web.UI/Umbraco/js (all stuff it currently does)

I converted the controller into a class, within the umbraco.services namespace.  The benefit of this is having the ability to generate a definitions file that will retain all namespaces and therefore make it extremely easy to find what you are looking for when creating Umbraco extensions such as custom property types, dashboards etc.

Note: I have set up a definitions folder for global variables that are declared outside of Typescript.  We can add typings in for Angular etc at a later date if needed.

.gitignore

@@ -157,6 +157,7 @@ build.tmp/
 build/hooks/
 build/temp/
 
+/src/Umbraco.Web.UI.Client/src/common/**/build/temp/
 
 
 # eof

src/Umbraco.Web.UI.Client/gulp/config.js

@@ -25,6 +25,10 @@ module.exports = {
             security: { files: ["./src/common/interceptors/**/*.js"], out: "umbraco.interceptors.js" }
         },
 
+        ts: {
+            services: { files: ["./src/common/services/**/*.ts"], out: "./src/common/services/build/temp/" }
+        },
+
         //selectors for copying all views into the build
         //processed in the views task
         views:{

src/Umbraco.Web.UI.Client/gulp/tasks/build.js

@@ -6,5 +6,5 @@ var runSequence = require('run-sequence');
 
 // Build - build the files ready for production
 gulp.task('build', function(cb) {
-    runSequence(["js", "dependencies", "less", "views"], "test:unit", cb);
+    runSequence(["typescript", "js", "dependencies", "less", "views"], "test:unit", cb);
 });

src/Umbraco.Web.UI.Client/gulp/tasks/dev.js

@@ -6,5 +6,5 @@ var runSequence = require('run-sequence');
 
 // Dev - build the files ready for development and start watchers
 gulp.task('dev', function(cb) {
-    runSequence(["dependencies", "js", "less", "views"], "watch", cb);
+    runSequence(["dependencies", "typescript", "js", "less", "views"], "watch", cb);
 });

src/Umbraco.Web.UI.Client/gulp/tasks/fastdev.js

@@ -9,5 +9,5 @@ gulp.task('fastdev', function(cb) {
 
     global.isProd = false;
 
-    runSequence(["dependencies", "js", "less", "views"], "watch", cb);
+    runSequence(["dependencies", "typescript", "js", "less", "views"], "watch", cb);
 });

src/Umbraco.Web.UI.Client/gulp/tasks/typescript.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var config = require('../config');
+var gulp = require('gulp');
+
+var _ = require('lodash');
+var MergeStream = require('merge-stream');
+
+var processTs = require('../util/processTypescript');
+
+/**************************
+ * Copies all angular JS files into their seperate umbraco.*.js file
+ **************************/
+gulp.task('typescript', function () {
+
+    //we run multiple streams, so merge them all together
+    var stream = new MergeStream();
+
+    stream.add(
+        gulp.src(config.sources.globs.js)
+            .pipe(gulp.dest(config.root + config.targets.js))
+        );
+
+      // compile TS
+      _.forEach(config.sources.ts, function (group) {
+         if(group.files.length > 0)
+            stream.add (processTs(group.files, group.out));
+      });
+
+      return stream;
+});

src/Umbraco.Web.UI.Client/gulp/util/processTypescript.js

@@ -0,0 +1,21 @@
+
+var config = require('../config');
+var gulp = require('gulp');
+
+var ts = require('gulp-typescript');
+
+module.exports = function(files, out) {
+
+    var task = gulp.src(files);
+
+    var tsProject = ts.createProject('tsconfig.json');
+
+
+    // sort files in stream by path or any custom sort comparator
+    task = task.pipe(tsProject())
+        .pipe(gulp.dest(out));
+
+
+    return task;
+
+};

src/Umbraco.Web.UI.Client/package.json

@@ -41,6 +41,7 @@
     "spectrum-colorpicker": "1.8.0",
     "tinymce": "4.9.2",
     "typeahead.js": "0.11.1",
+    "typescript": "^3.2.1",
     "underscore": "1.9.1"
   },
   "devDependencies": {
@@ -64,6 +65,7 @@
     "gulp-postcss": "8.0.0",
     "gulp-rename": "1.4.0",
     "gulp-sort": "2.0.0",
+    "gulp-typescript": "^5.0.1",
     "gulp-watch": "5.0.1",
     "gulp-wrap": "0.14.0",
     "gulp-wrap-js": "0.4.1",

src/Umbraco.Web.UI.Client/src/common/definitions/global.d.ts

@@ -0,0 +1,3 @@
+declare var angular: any;
+declare var _: any;
+declare var $q: any;

src/Umbraco.Web.UI.Client/src/common/definitions/string.ts

@@ -0,0 +1,4 @@
+
+interface StringConstructor {
+    CreateGuid(): string;
+}