在前端开发领域，技术更新换代的速度非常快，Angular.js作为曾经流行的框架，虽然社区活跃度有所下降，但依然有大量的项目在使用。对于维护这些项目的开发者来说，如何利用现代的技术优势，提高开发效率和代码质量，是一个值得思考的问题。TypeScript作为一种超集JavaScript语言，提供了静态类型检查、ES6+的新特性支持等优势，可以很好地与Angular.js结合使用。本文将介绍如何将Angular.js项目逐步迁移到TypeScript，以及如何利用TypeScript的优势。
首先，需要安装以下依赖：
npm install typescript gulp-typescript @types/angular --save-dev
然后，在项目根目录下创建tsconfig.json文件，配置TypeScript编译选项：
{
"compilerOptions": {
"allowJs": true,
"module": "none",
"target": "es5",
"types": ["angular"]
},
"include": [
"./src/**/*.ts"
]
}
在gulpfile.js中添加TypeScript编译任务：
var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json');
gulp.task('ts-build', function () {
return gulp.src(['src/**/*.ts'])
.pipe(tsProject())
.pipe(gulp.dest('src/'));
});
然后，可以在现有的gulp任务中调用这个新任务：
gulp.task('usemin', ['inject-templates', 'ts-build'], function () {
// ...
});
至此，已经搭建好了开发环境，并且可以继续开发和部署项目。
在转换代码时，建议从独立的单元开始，逐步进行。这样可以尽早享受到静态类型检查带来的好处。下面是一个指令（Directive）的转换示例：
// 原始Angular.js代码
angular.module('app.core').directive('ngEnter', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('keydown keypress', function (event) {
if (event.which === 13) {
scope.$apply(function () {
scope.$eval(attrs.ngEnter);
});
event.preventDefault();
}
});
}
};
});
// 转换为TypeScript
import * as angular from 'angular';
class NgEnterDirective implements angular.IDirective {
public link = (scope: any, element: angular.IAugmentedJQuery, attrs: angular.IAttributes) => {
element.bind('keydown keypress', (event: any) => {
if (event.which === 13) {
scope.$apply(() => {
scope.$eval(attrs.ngEnter);
});
event.preventDefault();
}
});
}
public static Factory(): angular.IDirectiveFactory {
return () => new NgEnterDirective();
}
}
angular.module('app.core').directive('ngEnter', NgEnterDirective.Factory);
接下来，来看一个服务（Service）的转换示例：
// 原始Angular.js代码
angular.module('app.services').factory('ShowService', ['$http', '$log', function ($http, $log) {
var service = {
API_KEY: '87de9079e74c828116acce677f6f255b',
BASE_URL: 'http://api.themoviedb.org/3',
getPremieres: function () {
var date = new Date();
date.setDate(1);
return $http.get(this.BASE_URL + '/discover/tv', {
params: {
'api_key': this.API_KEY,
'first_air_date.gte': this.moment(date).format('YYYY-MM-DD'),
'append_to_response': 'genres'
}
}).then(function (response) {
return response.data.results;
}, function (error) {
$log.error('XHR Failed for ShowService');
$log.error(error);
return error;
});
},
// ...
};
return service;
}]);
// 转换为TypeScript
import * as angular from 'angular';
import * as moment from 'moment';
class Show {
id: number;
original_name: string;
cast: Actor[];
genres: string[];
}
class Actor {
name: string;
character: string;
}
class TvServiceResponse {
results: Show[];
}
class ShowService {
static $inject = ['$http', '$log', 'moment'];
constructor(private $http: angular.IHttpService, private $log: angular.ILogService, private moment: any) {}
private API_KEY: string = '87de9079e74c828116acce677f6f255b';
private BASE_URL: string = 'http://api.themoviedb.org/3';
private makeRequest(url: string, params: any): angular.IPromise {
let requestUrl = `${this.BASE_URL}/${url}?api_key=${this.API_KEY}`;
angular.forEach(params, (value, key) => {
requestUrl += `&${key}=${value}`;
});
return this.$http.get(requestUrl, {
headers: { 'Content-Type': 'application/json' },
cache: true
}).then((response) => response.data).catch(this.dataServiceError);
}
getPremieres(): angular.IPromise {
let date = new Date();
date.setDate(1);
return this.makeRequest('discover/tv', {
'first_air_date.gte': this.moment(date).format('YYYY-MM-DD'),
'append_to_response': 'genres'
}).then((data: TvServiceResponse) => data.results);
}
// ...
}
angular.module('app.services').factory('ShowService', ShowService);
在转换过程中，可以利用TypeScript的类型系统，提高代码的可读性和健壮性。同时，也可以使用ES6的新特性，如箭头函数、字符串插值等，提高开发效率。
当项目中大部分代码都已经迁移到TypeScript后，可以在tsconfig.json中启用更多的严格检查选项：
{
"compilerOptions": {
"allowJs": true,
"alwaysStrict": true,
"module": "none",
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"target": "es5",
"types": ["angular"]
},
"include": [
"./src/**/*.ts"
]
}
这些选项可以帮助发现潜在的错误，提高代码质量。
使用TypeScript的一个好处是，可以在不依赖Angular.js的情况下构建应用逻辑。这在某些情况下非常有用，比如需要实现动态多态性，而Angular.js的依赖注入机制可能会限制。
class PageValues {
title: string;
description: string;
loading: boolean;
static instance: PageValues = new PageValues();
}
// 在Angular.js应用的任何地方都可以这样调用
PageValues.instance.title = 'VIEW';
PageValues.instance.description = `Overview, seasons & info for '${show.original_name}'`;
通过这种方式，可以更灵活地构建前端应用架构。