TypeScript spike

.gitignore

@@ -2,4 +2,5 @@
 artifacts
 build
 node_modules
+/typings
 npm-debug.log

.travis.yml

@@ -21,10 +21,12 @@ before_install:
 
 install:
   - npm install gulp --global
+  - npm install typings --global
   - npm install codecov --global
 
 before_script:
   - npm install
+  - typings install
 
 script:
   - gulp lint

karma.conf.js

@@ -1,5 +1,6 @@
+const webpack = require('./webpack-test.config');
+
 module.exports = function(config) {
-  const webpack = require('./webpack-test.config')(config);
 
   config.set({
 

package.json

@@ -66,6 +66,8 @@
     "sass-loader": "^4.0.2",
     "sinon": "^1.17.6",
     "style-loader": "^0.13.1",
+    "ts-loader": "^0.8.2",
+    "typescript": "^2.0.0",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.2",
     "webpack-combine-loaders": "^2.0.0",

src/app.ts

@@ -0,0 +1,12 @@
+/// <reference path="./typings/angular-loading-bar.d.ts" />
+/// <reference path="./typings/angular-messages.d.ts" />
+/// <reference path="./typings/angular-toastr.d.ts" />
+/// <reference path="./typings/require.d.ts" />
+
+import './style.scss';
+
+import * as angular from 'angular';
+import bootstrap from './app/bootstrap';
+
+angular.injector(['ng'])
+  .invoke(bootstrap);

src/app/about/module.js → src/app/about/module.ts

@@ -1,4 +1,4 @@
-import angular from 'angular';
+import * as angular from 'angular';
 import states from './states/config';
 import uiRouter from 'angular-ui-router';
 

src/app/about/states/main/state.js → src/app/about/states/main/state.ts

@@ -1,8 +1,6 @@
-import template from './template.html';
-
 export default  {
   name: 'about',
 
-  template,
+  template: require('./template.html'),
   url: '/about'
 };

src/app/about/states/main/state_spec.js → src/app/about/states/main/state_spec.ts

@@ -1,3 +1,4 @@
+import * as angular from 'angular';
 import { expect } from 'chai';
 import module from '../../module';
 

src/app/bootstrap.js → src/app/bootstrap.ts

@@ -1,7 +1,7 @@
-import angular from 'angular';
+import * as angular from 'angular';
 import module from './module';
 
-export default function($document) {
+export default function($document: JQuery) {
   'ngInject';
 
   angular.element($document).ready(() => {

src/app/bootstrap_spec.js → src/app/bootstrap_spec.ts

@@ -1,17 +1,17 @@
-import angular from 'angular';
+import * as angular from 'angular';
 import bootstrap from './bootstrap';
 import { expect } from 'chai';
-import sinon from 'sinon';
+import * as sinon from 'sinon';
 
 describe('boostrap', () => {
 
-  let sandbox;
+  let sandbox, stub;
 
   beforeEach(() => {
     sandbox = sinon.sandbox.create();
 
     // Do not boot the app in the test environment
-    sandbox.stub(angular, 'bootstrap');
+    stub = sandbox.stub(angular, 'bootstrap');
   });
 
   afterEach(() => {
@@ -25,9 +25,9 @@ describe('boostrap', () => {
         $injector.invoke(bootstrap);
 
         angular.element($document).ready(() => {
-          expect(angular.bootstrap.called).to.be.true;
+          expect(stub.called).to.be.true;
 
-          const [, modules, options] = angular.bootstrap.lastCall.args;
+          const [, modules, options] = stub.lastCall.args;
           expect(modules[0]).to.eq('app');
           expect(options).to.have.property('strictDi', true);
 

src/app/commons/components/footer/component.ts

@@ -0,0 +1,3 @@
+export default {
+  template: require('./template.html')
+};

src/app/commons/components/navigation/component.ts

@@ -0,0 +1,3 @@
+export default {
+  template: require('./template.html')
+};

src/app/commons/module.js → src/app/commons/module.ts

@@ -1,7 +1,7 @@
-import angular from 'angular';
+import * as angular from 'angular';
+import * as toastr from 'angular-toastr';
 import components from './components/config';
 import services from './services/config';
-import toastr from 'angular-toastr';
 
 export default angular.module('app.commons', [
   toastr

src/app/commons/services/alert/service.js → src/app/commons/services/alert/service.ts

@@ -1,4 +1,4 @@
-export default function($window) {
+export default function($window: ng.IWindowService) {
   'ngInject';
 
   return function(message) {

src/app/commons/services/alert/service_spec.js → src/app/commons/services/alert/service_spec.ts

@@ -1,6 +1,6 @@
 import { expect } from 'chai';
 import module from '../../module';
-import sinon from 'sinon';
+import * as sinon from 'sinon';
 
 describe(`module: ${module}`, () => {
 

src/app/commons/services/confirm/service.js → src/app/commons/services/confirm/service.ts

@@ -1,4 +1,4 @@
-export default function($window) {
+export default function($window: ng.IWindowService) {
   'ngInject';
 
   return function(message) {

src/app/commons/services/confirm/service_spec.js → src/app/commons/services/confirm/service_spec.ts

@@ -1,6 +1,7 @@
+import * as angular from 'angular';
 import { expect } from 'chai';
 import module from '../../module';
-import sinon from 'sinon';
+import * as sinon from 'sinon';
 
 describe(`module: ${module}`, () => {
 

src/app/config.js → src/app/config.ts

@@ -1,5 +1,3 @@
-import template404 from './404.html';
-
 export function router($urlMatcherFactoryProvider, $urlRouterProvider) {
   'ngInject';
 
@@ -12,7 +10,7 @@ export function notFoundState($stateProvider, $urlRouterProvider) {
 
   $stateProvider
     .state('404', {
-      template: template404
+      template: require('./404.html')
     });
 
   $urlRouterProvider.otherwise(($injector) => {

src/app/contacts/components/contact_form/component.js → src/app/contacts/components/contact_form/component.ts

@@ -1,11 +1,10 @@
 import controller from './controller';
-import template from './template.html';
 
 export default {
   bindings: {
     originalContact: '=contact',
     onSubmit: '&'
   },
   controller: controller,
-  template
+  template: require('./template.html')
 };

src/app/contacts/components/contact_form/component_spec.js → src/app/contacts/components/contact_form/component_spec.ts

@@ -1,7 +1,7 @@
-import angular from 'angular';
+import * as angular from 'angular';
 import { expect } from 'chai';
 import module from '../../module';
-import sinon from 'sinon';
+import * as sinon from 'sinon';
 
 describe(`module: ${module}`, () => {
 

src/app/contacts/components/contact_form/controller.js → src/app/contacts/components/contact_form/controller.ts

@@ -1,10 +1,15 @@
-import angular from 'angular';
+import * as angular from 'angular';
 
 export default class {
 
-  constructor($q) {
+  contact: any;
+  originalContact: any;
+  onSubmit: Function;
+
+  saving: boolean;
+
+  constructor(private $q) {
     'ngInject';
-    this.$q = $q;
 
     this.saving = false;
   }

src/app/contacts/components/favourite_button/component.js → src/app/contacts/components/favourite_button/component.ts

@@ -1,10 +1,9 @@
 import controller from './controller';
-import template from './template.html';
 
 export default {
   bindings: {
     contact: '='
   },
   controller,
-  template
+  template: require('./template.html')
 };

src/app/contacts/components/favourite_button/component_spec.js → src/app/contacts/components/favourite_button/component_spec.ts

@@ -1,7 +1,7 @@
-import angular from 'angular';
+import * as angular from 'angular';
 import { expect } from 'chai';
 import module from '../../module';
-import sinon from 'sinon';
+import * as sinon from 'sinon';
 
 describe(`module: ${module}`, () => {
 

src/app/contacts/components/favourite_button/controller.js → src/app/contacts/components/favourite_button/controller.ts

@@ -1,5 +1,8 @@
 export default class {
 
+  contact: any;
+  saving: boolean;
+
   $onInit() {
     this.saving = false;
   }

src/app/contacts/components/favourite_button/controller_spec.js → src/app/contacts/components/favourite_button/controller_spec.ts

@@ -1,7 +1,7 @@
-import angular from 'angular';
+import * as angular from 'angular';
 import { expect } from 'chai';
 import module from '../../module';
-import sinon from 'sinon';
+import * as sinon from 'sinon';
 
 describe(`module: ${module}`, () => {
 

src/app/contacts/module.js → src/app/contacts/module.ts

@@ -1,6 +1,6 @@
-import angular from 'angular';
-import angularMessages from 'angular-messages';
-import angularResource from 'angular-resource';
+import * as angular from 'angular';
+import * as angularMessages from 'angular-messages';
+import * as angularResource from 'angular-resource';
 import appCommons from '../commons/module';
 import components from './components/config';
 import services from './services/config';

src/app/contacts/services/contact/factory.js → src/app/contacts/services/contact/factory.ts

@@ -1,4 +1,4 @@
-import angular from 'angular';
+import * as angular from 'angular';
 import { extend } from '../../../utils';
 
 export default function($resource) {

src/app/contacts/states/edit/controller.js → src/app/contacts/states/edit/controller.ts

@@ -1,10 +1,9 @@
 export default class {
 
-  constructor($state, toastr, contact) {
-    'ngInject';
+  contact: any;
 
-    this.$state = $state;
-    this.toastr = toastr;
+  constructor(private $state, private toastr, contact) {
+    'ngInject';
 
     this.contact = contact;
   }

src/app/contacts/states/edit/controller_spec.js → src/app/contacts/states/edit/controller_spec.ts

@@ -1,7 +1,7 @@
-import angular from 'angular';
+import * as angular from 'angular';
 import { expect } from 'chai';
 import module from '../../module';
-import sinon from 'sinon';
+import * as sinon from 'sinon';
 import toastrMockModule from '../../../../specs/toastr_mock_module';
 
 describe(`module: ${module}`, () => {

src/app/contacts/states/edit/state.js → src/app/contacts/states/edit/state.ts

@@ -1,5 +1,4 @@
 import controller from './controller';
-import template from './template.html';
 
 function contact($stateParams, Contact) {
   'ngInject';
@@ -18,6 +17,6 @@ export default {
     contact
   },
 
-  template,
+  template: require('./template.html'),
   url: '/:id/edit'
 };

src/app/contacts/states/list/controller.js → src/app/contacts/states/list/controller.ts

@@ -1,5 +1,7 @@
 export default class {
 
+  contacts: Array<any>;
+
   constructor(contacts) {
     'ngInject';
 

src/app/contacts/states/list/controller_spec.js → src/app/contacts/states/list/controller_spec.ts

@@ -23,7 +23,7 @@ describe(`module: ${module}`, () => {
     }));
 
     it('has an array of contacts', () => {
-      expect(ctrl.contacts).to.be.an.array;
+      expect(ctrl.contacts).to.be.an.instanceOf(Array);
       expect(ctrl.contacts).to.have.length(2);
 
       expect(ctrl.contacts[0]).to.have.property('id', 1);

src/app/contacts/states/list/state.js → src/app/contacts/states/list/state.ts

@@ -1,5 +1,4 @@
 import controller from './controller';
-import template from './template.html';
 
 function contacts(Contact) {
   'ngInject';
@@ -16,6 +15,6 @@ export default {
     contacts
   },
 
-  template,
+  template: require('./template.html'),
   url: '/'
 };

src/app/contacts/states/list/state_spec.js → src/app/contacts/states/list/state_spec.ts

@@ -30,7 +30,7 @@ describe(`module: ${module}`, () => {
             ]});
 
         $resolve.resolve(state.resolve).then(({ contacts }) => {
-          expect(contacts).to.be.an.array;
+          expect(contacts).to.be.an.instanceOf(Array);
           expect(contacts).to.have.length(2);
           expect(contacts[0]).to.have.property('id', 10);
           expect(contacts[1]).to.have.property('id', 11);

src/app/contacts/states/new/controller.js → src/app/contacts/states/new/controller.ts

@@ -1,10 +1,9 @@
 export default class {
 
-  constructor($state, toastr, contact) {
-    'ngInject';
+  contact: any;
 
-    this.$state = $state;
-    this.toastr = toastr;
+  constructor(private $state, private toastr, contact) {
+    'ngInject';
 
     this.contact = contact;
   }