From 29c8dd8ebcf521f3814d59e2b2a785f0eba9b201 Mon Sep 17 00:00:00 2001 From: Lukasz Bandzarewicz Date: Thu, 15 Sep 2016 21:05:16 +0200 Subject: [PATCH 1/2] Migrate to TypeScript --- .babelrc.karma | 11 -------- .gitignore | 1 + .travis.yml | 2 ++ package.json | 7 +++--- src/app.js | 7 ------ src/app.ts | 10 ++++++++ src/app/about/{module.js => module.ts} | 2 +- src/app/about/states/{config.js => config.ts} | 0 .../about/states/main/{state.js => state.ts} | 4 +-- .../main/{state_spec.js => state_spec.ts} | 1 + src/app/{bootstrap.js => bootstrap.ts} | 4 +-- .../{bootstrap_spec.js => bootstrap_spec.ts} | 12 ++++----- src/app/commons/{module.js => module.ts} | 2 +- ...{confirm_service.js => confirm_service.ts} | 0 ...ervice_spec.js => confirm_service_spec.ts} | 2 +- ...component.js => contact_form_component.ts} | 10 ++++++-- ...spec.js => contact_form_component_spec.ts} | 4 +-- .../components/favourite_button_component.js | 8 ------ .../components/favourite_button_component.ts | 6 +++++ ....js => favourite_button_component_spec.ts} | 4 +-- src/app/contacts/{module.js => module.ts} | 10 ++++---- ...{contact_factory.js => contact_factory.ts} | 5 ++++ ...actory_spec.js => contact_factory_spec.ts} | 0 ...{resolve_contact.js => resolve_contact.ts} | 0 ...ontact_spec.js => resolve_contact_spec.ts} | 2 +- .../contacts/states/{config.js => config.ts} | 0 .../edit/{controller.js => controller.ts} | 4 ++- ...{controller_spec.js => controller_spec.ts} | 4 +-- .../states/edit/{state.js => state.ts} | 3 +-- .../edit/{state_spec.js => state_spec.ts} | 0 .../list/{controller.js => controller.ts} | 2 ++ ...{controller_spec.js => controller_spec.ts} | 2 +- .../states/list/{state.js => state.ts} | 3 +-- .../list/{state_spec.js => state_spec.ts} | 2 +- .../new/{controller.js => controller.ts} | 4 ++- ...{controller_spec.js => controller_spec.ts} | 4 +-- .../states/new/{state.js => state.ts} | 3 +-- .../new/{state_spec.js => state_spec.ts} | 0 .../show/{controller.js => controller.ts} | 6 ++--- ...{controller_spec.js => controller_spec.ts} | 2 +- .../states/show/{state.js => state.ts} | 3 +-- .../show/{state_spec.js => state_spec.ts} | 0 src/app/home/{module.js => module.ts} | 2 +- src/app/home/states/{config.js => config.ts} | 0 .../main/{controller.js => controller.ts} | 5 ++-- ...{controller_spec.js => controller_spec.ts} | 2 +- .../home/states/main/{state.js => state.ts} | 3 +-- .../main/{state_spec.js => state_spec.ts} | 0 src/app/{module.js => module.ts} | 12 ++++----- src/app/{module_spec.js => module_spec.ts} | 2 +- src/app/utils/{mixin.js => mixin.ts} | 2 +- .../utils/{mixin_spec.js => mixin_spec.ts} | 0 src/specs.js | 2 +- src/typings/angular-messages.d.ts | 4 +++ src/typings/require.d.ts | 5 ++++ tsconfig.json | 14 +++++++++++ typings.json | 14 +++++++++++ webpack-test.config.js | 25 ++++++++----------- webpack.config.js | 20 ++++++--------- 59 files changed, 151 insertions(+), 117 deletions(-) delete mode 100644 .babelrc.karma delete mode 100644 src/app.js create mode 100644 src/app.ts rename src/app/about/{module.js => module.ts} (81%) rename src/app/about/states/{config.js => config.ts} (100%) rename src/app/about/states/main/{state.js => state.ts} (50%) rename src/app/about/states/main/{state_spec.js => state_spec.ts} (92%) rename src/app/{bootstrap.js => bootstrap.ts} (70%) rename src/app/{bootstrap_spec.js => bootstrap_spec.ts} (72%) rename src/app/commons/{module.js => module.ts} (80%) rename src/app/commons/services/{confirm_service.js => confirm_service.ts} (100%) rename src/app/commons/services/{confirm_service_spec.js => confirm_service_spec.ts} (93%) rename src/app/contacts/components/{contact_form_component.js => contact_form_component.ts} (65%) rename src/app/contacts/components/{contact_form_component_spec.js => contact_form_component_spec.ts} (97%) delete mode 100644 src/app/contacts/components/favourite_button_component.js create mode 100644 src/app/contacts/components/favourite_button_component.ts rename src/app/contacts/components/{favourite_button_component_spec.js => favourite_button_component_spec.ts} (95%) rename src/app/contacts/{module.js => module.ts} (63%) rename src/app/contacts/services/{contact_factory.js => contact_factory.ts} (90%) rename src/app/contacts/services/{contact_factory_spec.js => contact_factory_spec.ts} (100%) rename src/app/contacts/services/{resolve_contact.js => resolve_contact.ts} (100%) rename src/app/contacts/services/{resolve_contact_spec.js => resolve_contact_spec.ts} (95%) rename src/app/contacts/states/{config.js => config.ts} (100%) rename src/app/contacts/states/edit/{controller.js => controller.ts} (84%) rename src/app/contacts/states/edit/{controller_spec.js => controller_spec.ts} (96%) rename src/app/contacts/states/edit/{state.js => state.ts} (81%) rename src/app/contacts/states/edit/{state_spec.js => state_spec.ts} (100%) rename src/app/contacts/states/list/{controller.js => controller.ts} (80%) rename src/app/contacts/states/list/{controller_spec.js => controller_spec.ts} (94%) rename src/app/contacts/states/list/{state.js => state.ts} (82%) rename src/app/contacts/states/list/{state_spec.js => state_spec.ts} (94%) rename src/app/contacts/states/new/{controller.js => controller.ts} (84%) rename src/app/contacts/states/new/{controller_spec.js => controller_spec.ts} (96%) rename src/app/contacts/states/new/{state.js => state.ts} (82%) rename src/app/contacts/states/new/{state_spec.js => state_spec.ts} (100%) rename src/app/contacts/states/show/{controller.js => controller.ts} (74%) rename src/app/contacts/states/show/{controller_spec.js => controller_spec.ts} (98%) rename src/app/contacts/states/show/{state.js => state.ts} (81%) rename src/app/contacts/states/show/{state_spec.js => state_spec.ts} (100%) rename src/app/home/{module.js => module.ts} (81%) rename src/app/home/states/{config.js => config.ts} (100%) rename src/app/home/states/main/{controller.js => controller.ts} (66%) rename src/app/home/states/main/{controller_spec.js => controller_spec.ts} (95%) rename src/app/home/states/main/{state.js => state.ts} (71%) rename src/app/home/states/main/{state_spec.js => state_spec.ts} (100%) rename src/app/{module.js => module.ts} (78%) rename src/app/{module_spec.js => module_spec.ts} (96%) rename src/app/utils/{mixin.js => mixin.ts} (95%) rename src/app/utils/{mixin_spec.js => mixin_spec.ts} (100%) create mode 100644 src/typings/angular-messages.d.ts create mode 100644 src/typings/require.d.ts create mode 100644 tsconfig.json create mode 100644 typings.json diff --git a/.babelrc.karma b/.babelrc.karma deleted file mode 100644 index 22f9024..0000000 --- a/.babelrc.karma +++ /dev/null @@ -1,11 +0,0 @@ - { - "presets": [ "es2015" ], - "plugins": [ - ["istanbul", { - "exclude": [ - "src/specs.js", - "src/**/*_spec.js" - ] - }] - ] - } diff --git a/.gitignore b/.gitignore index fea770a..d6dd45f 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,5 @@ artifacts build node_modules +/typings npm-debug.log diff --git a/.travis.yml b/.travis.yml index 2cb0abc..d1a4235 100644 --- a/.travis.yml +++ b/.travis.yml @@ -20,10 +20,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 diff --git a/package.json b/package.json index 40640bd..ebe7e9e 100644 --- a/package.json +++ b/package.json @@ -58,10 +58,10 @@ "sass-loader": "^4.0.2", "sinon": "^1.17.5", "style-loader": "^0.13.1", + "typescript": "^2.0.0", "url-loader": "^0.5.7", "webpack": "^1.13.2", - "webpack-combine-loaders": "^2.0.0", - "webpack-dev-server": "^1.15.2" + "webpack-dev-server": "^1.16.1" }, "dependencies": { "angular": "^1.5.8", @@ -73,6 +73,7 @@ "bootstrap-sass": "^3.3.7", "express": "^4.14.0", "faker": "^3.1.0", - "lodash": "^4.15.0" + "lodash": "^4.15.0", + "ts-loader": "^0.8.2" } } diff --git a/src/app.js b/src/app.js deleted file mode 100644 index 99e9012..0000000 --- a/src/app.js +++ /dev/null @@ -1,7 +0,0 @@ -import './style.scss'; - -import angular from 'angular'; -import bootstrap from './app/bootstrap'; - -angular.injector(['ng']) - .invoke(bootstrap); diff --git a/src/app.ts b/src/app.ts new file mode 100644 index 0000000..903f3c5 --- /dev/null +++ b/src/app.ts @@ -0,0 +1,10 @@ +/// +/// + +import './style.scss'; + +import * as angular from 'angular'; +import bootstrap from './app/bootstrap'; + +angular.injector(['ng']) + .invoke(bootstrap); diff --git a/src/app/about/module.js b/src/app/about/module.ts similarity index 81% rename from src/app/about/module.js rename to src/app/about/module.ts index 7deb280..4549c03 100644 --- a/src/app/about/module.js +++ b/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'; diff --git a/src/app/about/states/config.js b/src/app/about/states/config.ts similarity index 100% rename from src/app/about/states/config.js rename to src/app/about/states/config.ts diff --git a/src/app/about/states/main/state.js b/src/app/about/states/main/state.ts similarity index 50% rename from src/app/about/states/main/state.js rename to src/app/about/states/main/state.ts index 5571b7e..826d7d5 100644 --- a/src/app/about/states/main/state.js +++ b/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' }; diff --git a/src/app/about/states/main/state_spec.js b/src/app/about/states/main/state_spec.ts similarity index 92% rename from src/app/about/states/main/state_spec.js rename to src/app/about/states/main/state_spec.ts index 416ca91..11c49c2 100644 --- a/src/app/about/states/main/state_spec.js +++ b/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'; diff --git a/src/app/bootstrap.js b/src/app/bootstrap.ts similarity index 70% rename from src/app/bootstrap.js rename to src/app/bootstrap.ts index 0feeb4e..4908ec9 100644 --- a/src/app/bootstrap.js +++ b/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(() => { diff --git a/src/app/bootstrap_spec.js b/src/app/bootstrap_spec.ts similarity index 72% rename from src/app/bootstrap_spec.js rename to src/app/bootstrap_spec.ts index 720295c..d41f607 100644 --- a/src/app/bootstrap_spec.js +++ b/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); diff --git a/src/app/commons/module.js b/src/app/commons/module.ts similarity index 80% rename from src/app/commons/module.js rename to src/app/commons/module.ts index cd4bd38..7e8f35c 100644 --- a/src/app/commons/module.js +++ b/src/app/commons/module.ts @@ -1,4 +1,4 @@ -import angular from 'angular'; +import * as angular from 'angular'; import confirmService from './services/confirm_service'; export default angular.module('app.commons', []) diff --git a/src/app/commons/services/confirm_service.js b/src/app/commons/services/confirm_service.ts similarity index 100% rename from src/app/commons/services/confirm_service.js rename to src/app/commons/services/confirm_service.ts diff --git a/src/app/commons/services/confirm_service_spec.js b/src/app/commons/services/confirm_service_spec.ts similarity index 93% rename from src/app/commons/services/confirm_service_spec.js rename to src/app/commons/services/confirm_service_spec.ts index 00bcdca..c744f94 100644 --- a/src/app/commons/services/confirm_service_spec.js +++ b/src/app/commons/services/confirm_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.name}`, () => { diff --git a/src/app/contacts/components/contact_form_component.js b/src/app/contacts/components/contact_form_component.ts similarity index 65% rename from src/app/contacts/components/contact_form_component.js rename to src/app/contacts/components/contact_form_component.ts index 96d6aa4..96cf97b 100644 --- a/src/app/contacts/components/contact_form_component.js +++ b/src/app/contacts/components/contact_form_component.ts @@ -1,8 +1,12 @@ -import angular from 'angular'; -import template from './contact_form_component.html'; +import * as angular from 'angular'; +import IComponentOptions = angular.IComponentOptions; class Controller { + contact: any; + originalContact: any; + onSubmit: Function; + $onInit() { this.contact = angular.copy(this.originalContact); } @@ -21,6 +25,8 @@ class Controller { } +const template = require('./contact_form_component.html'); + export default { bindings: { originalContact: '=contact', diff --git a/src/app/contacts/components/contact_form_component_spec.js b/src/app/contacts/components/contact_form_component_spec.ts similarity index 97% rename from src/app/contacts/components/contact_form_component_spec.js rename to src/app/contacts/components/contact_form_component_spec.ts index 828b96e..481b218 100644 --- a/src/app/contacts/components/contact_form_component_spec.js +++ b/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.name}`, () => { diff --git a/src/app/contacts/components/favourite_button_component.js b/src/app/contacts/components/favourite_button_component.js deleted file mode 100644 index 5cbf103..0000000 --- a/src/app/contacts/components/favourite_button_component.js +++ /dev/null @@ -1,8 +0,0 @@ -import template from './favourite_button_component.html'; - -export default { - bindings: { - contact: '=' - }, - template -}; diff --git a/src/app/contacts/components/favourite_button_component.ts b/src/app/contacts/components/favourite_button_component.ts new file mode 100644 index 0000000..75f1990 --- /dev/null +++ b/src/app/contacts/components/favourite_button_component.ts @@ -0,0 +1,6 @@ +export default { + bindings: { + contact: '=' + }, + template: require('./favourite_button_component.html') +}; diff --git a/src/app/contacts/components/favourite_button_component_spec.js b/src/app/contacts/components/favourite_button_component_spec.ts similarity index 95% rename from src/app/contacts/components/favourite_button_component_spec.js rename to src/app/contacts/components/favourite_button_component_spec.ts index 437802b..565610f 100644 --- a/src/app/contacts/components/favourite_button_component_spec.js +++ b/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.name}`, () => { diff --git a/src/app/contacts/module.js b/src/app/contacts/module.ts similarity index 63% rename from src/app/contacts/module.js rename to src/app/contacts/module.ts index ca3276e..d2b5477 100644 --- a/src/app/contacts/module.js +++ b/src/app/contacts/module.ts @@ -1,10 +1,10 @@ -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 contactFactory from './services/contact_factory'; import contactFormComponent from './components/contact_form_component'; -import favouriteButonComponent from './components/favourite_button_component'; +import favouriteButtonComponent from './components/favourite_button_component'; import states from './states/config'; import uiRouter from 'angular-ui-router'; @@ -17,5 +17,5 @@ export default angular.module('app.contacts', [ ]) .factory('Contact', contactFactory) .component('contactForm', contactFormComponent) - .component('favouriteButton', favouriteButonComponent) + .component('favouriteButton', favouriteButtonComponent) .config(states); diff --git a/src/app/contacts/services/contact_factory.js b/src/app/contacts/services/contact_factory.ts similarity index 90% rename from src/app/contacts/services/contact_factory.js rename to src/app/contacts/services/contact_factory.ts index fc13528..b34fc7a 100644 --- a/src/app/contacts/services/contact_factory.js +++ b/src/app/contacts/services/contact_factory.ts @@ -18,6 +18,11 @@ export default function($resource) { class ContactMixin { + id: number; + firstName: string; + lastName: string; + favourite: boolean; + get fullName() { return [this.firstName, this.lastName].join(' '); } diff --git a/src/app/contacts/services/contact_factory_spec.js b/src/app/contacts/services/contact_factory_spec.ts similarity index 100% rename from src/app/contacts/services/contact_factory_spec.js rename to src/app/contacts/services/contact_factory_spec.ts diff --git a/src/app/contacts/services/resolve_contact.js b/src/app/contacts/services/resolve_contact.ts similarity index 100% rename from src/app/contacts/services/resolve_contact.js rename to src/app/contacts/services/resolve_contact.ts diff --git a/src/app/contacts/services/resolve_contact_spec.js b/src/app/contacts/services/resolve_contact_spec.ts similarity index 95% rename from src/app/contacts/services/resolve_contact_spec.js rename to src/app/contacts/services/resolve_contact_spec.ts index 76876ff..52bb837 100644 --- a/src/app/contacts/services/resolve_contact_spec.js +++ b/src/app/contacts/services/resolve_contact_spec.ts @@ -1,6 +1,6 @@ import { expect } from 'chai'; import resolveContact from './resolve_contact'; -import sinon from 'sinon'; +import * as sinon from 'sinon'; describe('.resolveContact', () => { diff --git a/src/app/contacts/states/config.js b/src/app/contacts/states/config.ts similarity index 100% rename from src/app/contacts/states/config.js rename to src/app/contacts/states/config.ts diff --git a/src/app/contacts/states/edit/controller.js b/src/app/contacts/states/edit/controller.ts similarity index 84% rename from src/app/contacts/states/edit/controller.js rename to src/app/contacts/states/edit/controller.ts index 4d4a7e8..024a1c9 100644 --- a/src/app/contacts/states/edit/controller.js +++ b/src/app/contacts/states/edit/controller.ts @@ -1,6 +1,8 @@ export default class { - constructor($state, contact) { + contact: any; + + constructor(private $state, contact) { 'ngInject'; this.$state = $state; diff --git a/src/app/contacts/states/edit/controller_spec.js b/src/app/contacts/states/edit/controller_spec.ts similarity index 96% rename from src/app/contacts/states/edit/controller_spec.js rename to src/app/contacts/states/edit/controller_spec.ts index bd0a3e2..8f6d150 100644 --- a/src/app/contacts/states/edit/controller_spec.js +++ b/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'; describe(`module: ${module.name}`, () => { diff --git a/src/app/contacts/states/edit/state.js b/src/app/contacts/states/edit/state.ts similarity index 81% rename from src/app/contacts/states/edit/state.js rename to src/app/contacts/states/edit/state.ts index da92317..46e4a09 100644 --- a/src/app/contacts/states/edit/state.js +++ b/src/app/contacts/states/edit/state.ts @@ -1,6 +1,5 @@ import contact from '../../services/resolve_contact'; import controller from './controller'; -import template from './template.html'; export default { name: 'contacts.edit', @@ -12,6 +11,6 @@ export default { contact }, - template, + template: require('./template.html'), url: '/:id/edit' }; diff --git a/src/app/contacts/states/edit/state_spec.js b/src/app/contacts/states/edit/state_spec.ts similarity index 100% rename from src/app/contacts/states/edit/state_spec.js rename to src/app/contacts/states/edit/state_spec.ts diff --git a/src/app/contacts/states/list/controller.js b/src/app/contacts/states/list/controller.ts similarity index 80% rename from src/app/contacts/states/list/controller.js rename to src/app/contacts/states/list/controller.ts index 38bb315..3dd2fdd 100644 --- a/src/app/contacts/states/list/controller.js +++ b/src/app/contacts/states/list/controller.ts @@ -1,5 +1,7 @@ export default class { + contacts: Array; + constructor(contacts) { 'ngInject'; diff --git a/src/app/contacts/states/list/controller_spec.js b/src/app/contacts/states/list/controller_spec.ts similarity index 94% rename from src/app/contacts/states/list/controller_spec.js rename to src/app/contacts/states/list/controller_spec.ts index efaf642..5baed78 100644 --- a/src/app/contacts/states/list/controller_spec.js +++ b/src/app/contacts/states/list/controller_spec.ts @@ -23,7 +23,7 @@ describe(`module: ${module.name}`, () => { })); 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); diff --git a/src/app/contacts/states/list/state.js b/src/app/contacts/states/list/state.ts similarity index 82% rename from src/app/contacts/states/list/state.js rename to src/app/contacts/states/list/state.ts index 785b033..eafea98 100644 --- a/src/app/contacts/states/list/state.js +++ b/src/app/contacts/states/list/state.ts @@ -1,5 +1,4 @@ import controller from './controller'; -import template from './template.html'; function contacts(Contact) { 'ngInject'; @@ -17,6 +16,6 @@ export default { contacts }, - template, + template: require('./template.html'), url: '/' }; diff --git a/src/app/contacts/states/list/state_spec.js b/src/app/contacts/states/list/state_spec.ts similarity index 94% rename from src/app/contacts/states/list/state_spec.js rename to src/app/contacts/states/list/state_spec.ts index e1904cb..0fbb8c8 100644 --- a/src/app/contacts/states/list/state_spec.js +++ b/src/app/contacts/states/list/state_spec.ts @@ -30,7 +30,7 @@ describe(`module: ${module.name}`, () => { ]}); $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); diff --git a/src/app/contacts/states/new/controller.js b/src/app/contacts/states/new/controller.ts similarity index 84% rename from src/app/contacts/states/new/controller.js rename to src/app/contacts/states/new/controller.ts index 630932d..38214f7 100644 --- a/src/app/contacts/states/new/controller.js +++ b/src/app/contacts/states/new/controller.ts @@ -1,6 +1,8 @@ export default class { - constructor($state, contact) { + contact: any; + + constructor(private $state, contact) { 'ngInject'; this.$state = $state; diff --git a/src/app/contacts/states/new/controller_spec.js b/src/app/contacts/states/new/controller_spec.ts similarity index 96% rename from src/app/contacts/states/new/controller_spec.js rename to src/app/contacts/states/new/controller_spec.ts index e40b4be..4b23aaf 100644 --- a/src/app/contacts/states/new/controller_spec.js +++ b/src/app/contacts/states/new/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.name}`, () => { diff --git a/src/app/contacts/states/new/state.js b/src/app/contacts/states/new/state.ts similarity index 82% rename from src/app/contacts/states/new/state.js rename to src/app/contacts/states/new/state.ts index 7b2239a..8c6ee05 100644 --- a/src/app/contacts/states/new/state.js +++ b/src/app/contacts/states/new/state.ts @@ -1,5 +1,4 @@ import controller from './controller'; -import template from './template.html'; function contact(Contact) { 'ngInject'; @@ -16,6 +15,6 @@ export default { contact }, - template, + template: require('./template.html'), url: '/new' }; diff --git a/src/app/contacts/states/new/state_spec.js b/src/app/contacts/states/new/state_spec.ts similarity index 100% rename from src/app/contacts/states/new/state_spec.js rename to src/app/contacts/states/new/state_spec.ts diff --git a/src/app/contacts/states/show/controller.js b/src/app/contacts/states/show/controller.ts similarity index 74% rename from src/app/contacts/states/show/controller.js rename to src/app/contacts/states/show/controller.ts index c626e05..13d758e 100644 --- a/src/app/contacts/states/show/controller.js +++ b/src/app/contacts/states/show/controller.ts @@ -1,10 +1,10 @@ export default class { - constructor($state, confirm, contact) { + contact: any; + + constructor(private $state, private confirm, contact) { 'ngInject'; - this.$state = $state; - this.confirm = confirm; this.contact = contact; } diff --git a/src/app/contacts/states/show/controller_spec.js b/src/app/contacts/states/show/controller_spec.ts similarity index 98% rename from src/app/contacts/states/show/controller_spec.js rename to src/app/contacts/states/show/controller_spec.ts index 9bcaaba..38056d8 100644 --- a/src/app/contacts/states/show/controller_spec.js +++ b/src/app/contacts/states/show/controller_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.name}`, () => { diff --git a/src/app/contacts/states/show/state.js b/src/app/contacts/states/show/state.ts similarity index 81% rename from src/app/contacts/states/show/state.js rename to src/app/contacts/states/show/state.ts index 728e9d2..fa734ac 100644 --- a/src/app/contacts/states/show/state.js +++ b/src/app/contacts/states/show/state.ts @@ -1,6 +1,5 @@ import contact from '../../services/resolve_contact'; import controller from './controller'; -import template from './template.html'; export default { name: 'contacts.show', @@ -12,6 +11,6 @@ export default { contact }, - template, + template: require('./template.html'), url: '/:id' }; diff --git a/src/app/contacts/states/show/state_spec.js b/src/app/contacts/states/show/state_spec.ts similarity index 100% rename from src/app/contacts/states/show/state_spec.js rename to src/app/contacts/states/show/state_spec.ts diff --git a/src/app/home/module.js b/src/app/home/module.ts similarity index 81% rename from src/app/home/module.js rename to src/app/home/module.ts index 38bd4c2..ea28263 100644 --- a/src/app/home/module.js +++ b/src/app/home/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'; diff --git a/src/app/home/states/config.js b/src/app/home/states/config.ts similarity index 100% rename from src/app/home/states/config.js rename to src/app/home/states/config.ts diff --git a/src/app/home/states/main/controller.js b/src/app/home/states/main/controller.ts similarity index 66% rename from src/app/home/states/main/controller.js rename to src/app/home/states/main/controller.ts index 1839e35..1b9eb7a 100644 --- a/src/app/home/states/main/controller.js +++ b/src/app/home/states/main/controller.ts @@ -1,9 +1,10 @@ export default class { - constructor($window) { + message: string; + + constructor(private $window: ng.IWindowService) { 'ngInject'; - this.$window = $window; this.message = 'Hello World!'; } diff --git a/src/app/home/states/main/controller_spec.js b/src/app/home/states/main/controller_spec.ts similarity index 95% rename from src/app/home/states/main/controller_spec.js rename to src/app/home/states/main/controller_spec.ts index e9339e1..3f47ddd 100644 --- a/src/app/home/states/main/controller_spec.js +++ b/src/app/home/states/main/controller_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.name}`, () => { diff --git a/src/app/home/states/main/state.js b/src/app/home/states/main/state.ts similarity index 71% rename from src/app/home/states/main/state.js rename to src/app/home/states/main/state.ts index fe65039..246035c 100644 --- a/src/app/home/states/main/state.js +++ b/src/app/home/states/main/state.ts @@ -1,5 +1,4 @@ import controller from './controller'; -import template from './template.html'; export default { name: 'home', @@ -7,6 +6,6 @@ export default { controller, controllerAs: 'ctrl', - template, + template: require('./template.html'), url: '/' }; diff --git a/src/app/home/states/main/state_spec.js b/src/app/home/states/main/state_spec.ts similarity index 100% rename from src/app/home/states/main/state_spec.js rename to src/app/home/states/main/state_spec.ts diff --git a/src/app/module.js b/src/app/module.ts similarity index 78% rename from src/app/module.js rename to src/app/module.ts index 4d1799f..25af7dc 100644 --- a/src/app/module.js +++ b/src/app/module.ts @@ -1,12 +1,12 @@ -import angular from 'angular'; +import * as angular from 'angular'; import appAbout from './about/module'; import appCommons from './commons/module'; import appContacts from './contacts/module'; import appHome from './home/module'; -import buildSignature from '../../build_signature_loader!./build_signature.tpl'; -import template404 from './404.html'; import uiRouter from 'angular-ui-router'; +const buildSignature = require('../../build_signature_loader!./build_signature.tpl') + function router($urlMatcherFactoryProvider, $urlRouterProvider) { 'ngInject'; @@ -19,7 +19,7 @@ function notFoundState($stateProvider, $urlRouterProvider) { $stateProvider .state('404', { - template: template404 + template: require('./404.html') }); $urlRouterProvider.otherwise(($injector) => { @@ -37,14 +37,14 @@ export default angular.module('app', [ ]) .config(router) .config(notFoundState) - .run(($log, $rootScope, $state) => { + .run(($log: angular.ILogService, $rootScope: angular.IScope, $state) => { 'ngInject'; $rootScope.$on('$stateChangeError', (event, toState, toParams, fromState, fromParams, error) => { $log.error('$stateChangeError', error); $state.go('404'); }); - }).run(($log) => { + }).run(($log: angular.ILogService) => { 'ngInject'; $log.info(buildSignature); diff --git a/src/app/module_spec.js b/src/app/module_spec.ts similarity index 96% rename from src/app/module_spec.js rename to src/app/module_spec.ts index f0f9f7a..f86b8bc 100644 --- a/src/app/module_spec.js +++ b/src/app/module_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.name}`, () => { diff --git a/src/app/utils/mixin.js b/src/app/utils/mixin.ts similarity index 95% rename from src/app/utils/mixin.js rename to src/app/utils/mixin.ts index 10258b8..f17fdd0 100644 --- a/src/app/utils/mixin.js +++ b/src/app/utils/mixin.ts @@ -1,4 +1,4 @@ -import _ from 'lodash'; +import * as _ from 'lodash'; function mixin(target, source, { restricted }) { Object.getOwnPropertyNames(source) diff --git a/src/app/utils/mixin_spec.js b/src/app/utils/mixin_spec.ts similarity index 100% rename from src/app/utils/mixin_spec.js rename to src/app/utils/mixin_spec.ts diff --git a/src/specs.js b/src/specs.js index bb89241..5bd6732 100644 --- a/src/specs.js +++ b/src/specs.js @@ -1,4 +1,4 @@ -import 'angular'; +import angular from 'angular'; import 'angular-mocks'; // Enable strictDi mode for all specs diff --git a/src/typings/angular-messages.d.ts b/src/typings/angular-messages.d.ts new file mode 100644 index 0000000..b576b20 --- /dev/null +++ b/src/typings/angular-messages.d.ts @@ -0,0 +1,4 @@ +declare module 'angular-messages' { + var _: string; + export = _; +} diff --git a/src/typings/require.d.ts b/src/typings/require.d.ts new file mode 100644 index 0000000..0ec43f7 --- /dev/null +++ b/src/typings/require.d.ts @@ -0,0 +1,5 @@ + declare var require: { + (path: string): T; + (paths: string[], callback: (...modules: any[]) => void): void; + ensure: (paths: string[], callback: (require: (path: string) => T) => void) => void; +}; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..d8c5060 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "commonjs", + "noImplicitAny": false + }, + "files": [ + "typings/index.d.ts", + "src/app.ts" + ], + "exclude": [ + "node_modules" + ] +} diff --git a/typings.json b/typings.json new file mode 100644 index 0000000..b895680 --- /dev/null +++ b/typings.json @@ -0,0 +1,14 @@ +{ + "dependencies": {}, + "globalDependencies": { + "angular": "registry:dt/angular#1.5.0+20160909133806", + "angular-mocks": "registry:dt/angular-mocks#1.5.0+20160608104721", + "angular-resource": "registry:dt/angular-resource#1.5.0+20160914132003", + "chai": "registry:dt/chai#3.4.0+20160601211834", + "core-js": "registry:dt/core-js#0.0.0+20160914114559", + "jquery": "registry:dt/jquery#1.10.0+20160908203239", + "lodash": "registry:dt/lodash#4.14.0+20160830145422", + "mocha": "registry:dt/mocha#2.2.5+20160720003353", + "sinon": "registry:dt/sinon#1.16.0+20160517064723" + } +} diff --git a/webpack-test.config.js b/webpack-test.config.js index 8dccba8..17d2b7a 100644 --- a/webpack-test.config.js +++ b/webpack-test.config.js @@ -1,19 +1,18 @@ -const combineLoaders = require('webpack-combine-loaders'); -const path = require('path'); - module.exports = { + resolve: { + extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'], + alias: { sinon: 'sinon/pkg/sinon.js' } + }, + module: { loaders: [{ test: /\.js$/, exclude: /node_modules/, - loader: combineLoaders([{ - loader: 'ng-annotate' - }, { - loader: 'babel-loader', - query: { - extends: path.join(__dirname, '.babelrc.karma') - } - }]) + loader: 'babel-loader' + }, { + test: /\.ts$/, + exclude: /node_modules/, + loader: 'ng-annotate!ts-loader' }, { test: /\.html$/, loader: 'html' @@ -29,9 +28,5 @@ module.exports = { }] }, - resolve: { - alias: { sinon: 'sinon/pkg/sinon.js' } - }, - devtool: 'inline-source-map' }; diff --git a/webpack.config.js b/webpack.config.js index 6dcef2f..c98da4b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,7 +1,6 @@ const CleanWebpackPlugin = require('clean-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); -const combineLoaders = require('webpack-combine-loaders'); const path = require('path'); const webpack = require('webpack'); @@ -17,7 +16,7 @@ module.exports = { 'angular-ui-router', 'lodash' ], - app: ['./src/app.js'] + app: ['./src/app.ts'] }, output: { @@ -26,6 +25,10 @@ module.exports = { chunkFilename: CHUNK_FILENAME }, + resolve: { + extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'] + }, + plugins: [ new CleanWebpackPlugin(BUILD_DIRECTORY, { verbose: true @@ -41,16 +44,9 @@ module.exports = { module: { loaders: [{ - test: /\.js$/, + test: /\.ts$/, exclude: /node_modules/, - loader: combineLoaders([{ - loader: 'ng-annotate' - }, { - loader: 'babel-loader', - query: { - extends: path.join(__dirname, '.babelrc') - } - }]) + loader: 'ng-annotate!ts-loader' }, { test: /\.html$/, loader: 'html' @@ -96,5 +92,5 @@ module.exports = { } }, - devtool: 'eval-source-map ' + devtool: 'eval-source-map' }; From 2a80f71bf0791b5c09fbc87326ac886fba921761 Mon Sep 17 00:00:00 2001 From: Lukasz Bandzarewicz Date: Sun, 18 Sep 2016 22:31:54 +0200 Subject: [PATCH 2/2] wip --- .../components/contact_form_component.ts | 6 +++--- src/app/contacts/services/contact_factory.ts | 19 +++++++++++++++++-- src/app/contacts/services/resolve_contact.ts | 4 +++- src/app/contacts/states/list/controller.ts | 4 +++- src/specs.js | 1 + 5 files changed, 27 insertions(+), 7 deletions(-) diff --git a/src/app/contacts/components/contact_form_component.ts b/src/app/contacts/components/contact_form_component.ts index 96cf97b..a8b1921 100644 --- a/src/app/contacts/components/contact_form_component.ts +++ b/src/app/contacts/components/contact_form_component.ts @@ -1,10 +1,10 @@ import * as angular from 'angular'; -import IComponentOptions = angular.IComponentOptions; +import { IContact } from '../services/contact_factory'; class Controller { - contact: any; - originalContact: any; + contact: IContact; + originalContact: IContact; onSubmit: Function; $onInit() { diff --git a/src/app/contacts/services/contact_factory.ts b/src/app/contacts/services/contact_factory.ts index b34fc7a..b057979 100644 --- a/src/app/contacts/services/contact_factory.ts +++ b/src/app/contacts/services/contact_factory.ts @@ -1,5 +1,20 @@ import mixin from '../../utils/mixin'; +export interface IContact extends ng.resource.IResource { + id: number; + firstName: string; + lastName: string; + favourite: boolean; + + fullName: string; + + toggleFavourite(): Promise; +} + +export interface IContactClass extends ng.resource.IResourceClass { + +} + export default function($resource) { 'ngInject'; @@ -23,11 +38,11 @@ export default function($resource) { lastName: string; favourite: boolean; - get fullName() { + get fullName(): string { return [this.firstName, this.lastName].join(' '); } - toggleFavourite() { + toggleFavourite(): Promise { const { id, favourite } = this; return Contact.update({ id, favourite: !favourite }).$promise .then((contact) => angular.extend(this, contact)); diff --git a/src/app/contacts/services/resolve_contact.ts b/src/app/contacts/services/resolve_contact.ts index 623cfcd..7201766 100644 --- a/src/app/contacts/services/resolve_contact.ts +++ b/src/app/contacts/services/resolve_contact.ts @@ -1,4 +1,6 @@ -export default function($stateParams, Contact) { +import { IContactClass } from './contact_factory'; + +export default function($stateParams, Contact: IContactClass) { 'ngInject'; const { id } = $stateParams; diff --git a/src/app/contacts/states/list/controller.ts b/src/app/contacts/states/list/controller.ts index 3dd2fdd..5e68ff7 100644 --- a/src/app/contacts/states/list/controller.ts +++ b/src/app/contacts/states/list/controller.ts @@ -1,6 +1,8 @@ +import { IContact } from '../../services/contact_factory'; + export default class { - contacts: Array; + contacts: Array; constructor(contacts) { 'ngInject'; diff --git a/src/specs.js b/src/specs.js index 5bd6732..335a79a 100644 --- a/src/specs.js +++ b/src/specs.js @@ -1,3 +1,4 @@ +// TODO ignore imports order import angular from 'angular'; import 'angular-mocks';