考虑到一些老的项目仍在使用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
网友评论