We recently started a new project and decided to use TypeScript along with Angular 1.5. Angular 1.5 introduces a new abstraction called a “component” which closely resembles Angular 2’s component based approach. Surprisingly, there isn’t a lot of simple TypeScript sample code available for Angular 1.5 so I decided to throw something together in case anyone else is looking. The code is available at https://github.com/Setfive/ng_typescript_starter and a live demo of it is running at http://code.setfive.com/ng_typescript_starter.

So what are some standouts with TypeScript and Angular 1.5?

• The 1 way bindings components introduce are easier to reason about but having to explicitly add functions for “outputs” does add some verbosity
• Related to that, there’s a fair amount of boilerplate to create a single component since you have to define 2 classes
• Dropping $scope in favor of automatically binding the controller object to $ctrl in templates is great – especially with TypeScript classes
• Related to that, without $scope for events it’s unclear when it’s appropriate to use $rootScope for an event bus
• You can write typesafe code for almost all of your controller business logic
• It’s really unfortunate the TypeScript compiler can’t typecheck your Angular templates
• Using the $inject annotation with component classes looks “right” versus the “array like” syntax
• You need to be somewhat cognizant of matching your @types annotations with the correct version of the library you’re using
• Using components with ui-router makes it fairly difficult to communicate between sibling views

Anyway, beyond fighting with build tools to convert a TypeScript project into usable JavaScript the language part has been great to work with. We ended up using Browserify with tsify but it was pretty frustrating to get it working. I might of missed something but it seems like I needed tsify available in a separate node_modules directory from the project source. The demo app is setup this way for that reason.

As always, questions and comments are welcome!

Posted In: AngularJS, Javascript

Tags: angularjs, typescript