考慮到一些老的項目仍在使用AngularJS 1.x開發，而Angular 2+優先使用typescript開發，所以打算使用typescript來開發AngularJS 1.x的應用，希望能夠對以後升級到Angular 2+有所幫助。 其實使用typescript開發和使用ES6開發基本是一致的， ...
考慮到一些老的項目仍在使用AngularJS 1.x開發，而Angular 2+優先使用typescript開發，所以打算使用typescript來開發AngularJS 1.x的應用，希望能夠對以後升級到Angular 2+有所幫助。
其實使用typescript開發和使用ES6開發基本是一致的，關鍵是我們可以使用新的特性、更簡潔的語法來進行代碼層面的優化。這篇文章主要介紹了在代碼實踐方面的一些心得。
模塊
我們可以將各個功能模塊進行分組，使用一個包含.module()的外殼來進行包裝，把module的name屬性export出去。
示例:
pages模塊定義
import angular = require('angular')
export default angular
.module('pages', [])
.name在項目的入口文件index.ts中引用pages模塊
import angular = require('angular')
import pages from './pages'
angular.module('app', [pages])
angular.bootstrap(document, ['app'])組件
AngularJS 1.5+提供了component方法，彌補了基於組件層面開發的不足，該方法接收兩個參數，第一個是組件名稱，第二個是定義組件的配置項（本質上是簡化版的指令定義對象）。
示例：
// home.component.ts
import ctrl from './controller'
import html from './index.html'
import './index.scss'
export default {
template: html,
controller: ctrl
}在pages模塊中註冊組件
import angular = require('angular')
import Home from './home'
export default angular
.module('pages', [])
.component('home', Home)
.name組件的定義我是直接將配置項導出，把html模板文件和controller分離到單獨的文件中進行開發；一個完整的組件還需要管理自己的樣式，我們可以將它import進來，和模板文件一起通過webpack來進行打包管理。
controller和service
controller和service方法的第二個參數都是接收一個構造函數，所以可以直接export一個class。
service.ts實現
export default class LogService {
info(info) {
console.log(info)
}
}controller.ts實現
export default class HomeCtrl {}在pages模塊中註冊service
import log from '../services/log.service'
export default angular
.module('pages', [])
.component('home', Home)
.service('log', log)
.name由於controller是直接在組件中使用的，所以不再需要在module下註冊。
directive和factory
directive和factory的使用方式也是一致的（前提是factory返回一個對象），都是接收一個工廠函數；唯一不同的是，directive必須返回一個指令定義對象，而factory可以返回任何數據類型。
directive.ts實現
export default class TipDirective {
template = template
restrict = 'A' // 1.5+版本建議都使用'A'，只做一些增強交互效果的操作
scope = {};
link (scope) {}
}在module中定義
import tip from 'directive.ts'
export default angular
.module('pages', [])
.directive('tip', () => new tip()) // 通過new來返回一個實例對象
.name依賴註入處理
關於依賴註入的處理，我們可以通過靜態屬性來幫助實現註入，下麵以在controller中的使用為例。
export default class TodoListCtrl {
static $inject = ['log']
constructor(private log) {
this.log.info('info')
}
}類型聲明文件獲取
在typescript 2.0以上的版本，可通過npm獲取第三方庫的類型聲明文件。大多數情況下，類型聲明包的名字與它們npm包的名字相同，但是有@types/首碼。你也可以在這裡查找你需要的庫。
例如
npm install --save @types/angular使用
import angular = require('angular')最後
以上是對近期使用typescript開發AngularJS 1.x應用的簡單總結，如有錯誤，請及時指正。
示例項目地址https://github.com/youngluo/angularjs-ts-boilerplate
