Let’s add TypeScript to the mix. I like typing – basically because I hate making unforced errors. I like interfaces for the same reason – they allow defining complex types before they get used.
I’ve known about TypeScript for a while, but I wasn’t good enough with JavaScript to really understand what it was doing. It just didn’t seem like a good idea to add yet another abstraction to the already shaky tower of JavaScript, Angular and threeJS.
But now I’ve been working with some reasonably complex JavaScript and have enough comprehension to understand the conversions that TypeScript makes. I might even be consciously competent:
TypeScript has been used with Angular before, and it’s also part of the plan for Angular 2.0. Sean Hess has a nice angular with typescript video. The key points are really around 15:00 in, where the controllers and factories are built. His github repository for the demo code is here. It was great to see that TypeScript and Angular can be combined, but I really wanted something as simple as possible, so I got a copy of TypeScript Essentials and started with the basics.
With that in mind, I’ve tried to make a very simple TypeScript class and incorporate it into the angular framework using a second TypeScript class. In the interest of maximum simplicity, there are only classes and typing – no interfaces (other than the ones from definitely typed) and no modules. No inheritance either. All these will be in a later post.
So, without any more introduction, here are the results:
- First, plain old angular HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="simpleApp">
<div ng-controller="MainCtrl as mc">
<p>String = {{mc.myString}}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="simple.js"></script>
</body>
</html>
- Next, the TypeScript (simple.ts):
/// <reference path="../definitelytyped/angularjs/angular.d.ts" />
class TestClass{
myString:string;
constructor(){
this.myString = "Hello, TypeScript4";
}
}
class AngularMain{
myModule:ng.IModule;
myController:ng.IModule;
public doCreate(angular:ng.IAngularStatic, sfn:Function){
this.myModule = angular.module('simpleApp', []);
this.myController = this.myModule.controller('MainCtrl', [sfn]);
}
}
new AngularMain().doCreate(angular, TestClass);
- Last, the generated JavaScript code (simple.js):
/// <reference path="../definitelytyped/angularjs/angular.d.ts" />
var TestClass = (function () {
function TestClass() {
this.myString = "Hello, TypeScript4";
}
return TestClass;
})();
var AngularMain = (function () {
function AngularMain() {
}
AngularMain.prototype.doCreate = function (angular, sfn) {
this.myModule = angular.module('simpleApp', []);
this.myController = this.myModule.controller('MainCtrl', [sfn]);
};
return AngularMain;
})();
new AngularMain().doCreate(angular, TestClass);
//# sourceMappingURL=simple.js.map
I’ve put a running example up here.
- The typescript file
- The javascript file
- And the typescript map file (what’s a map file?)
Happy coding!
Phlog 