最近，TypeScript 成为了很多前端开发者的新宠。它可以给我们带来类型检查、智能代码提示等优秀的开发体验。但是，如果你的项目已经使用了 AngularJS，那么你可能会想问：
“我怎么才能将我们的老项目从 AngularJS 转换到 TypeScript 呢？”
在本文中，我们将深入探讨这个问题，并提供详细的步骤和示例代码。
1. 确认你的 AngularJS 版本
在开始 TypeScript 转换之前，你需要先确认你的 AngularJS 版本是否为 1.5 或更高版本。因为这些版本已经支持 ES6 的语法，从而使得将其转换为 TypeScript 更容易。
如果你的 AngularJS 版本低于 1.5，那么你需要先将其升级到 1.5 或更高版本，具体可以参考 AngularJS 官方文档。
2. 添加 TypeScript 支持
在确认了 AngularJS 版本之后，你需要为你的项目添加 TypeScript 支持。具体操作如下：
- 安装 TypeScript
首先，你需要通过 npm 安装 TypeScript：
npm install typescript --save-dev
- 添加 TypeScript 配置
然后，在项目根目录下创建一个 tsconfig.json 文件，用于配置 TypeScript 选项：
-- -------------------- ---- -------
-
------------------ -
--------- ------
--------- -----------
--------- -----
------------------ -----
------------ -----
-------------- ----
--
---------- -
----------
-
-这个配置文件是经过精心编排的，包含了一些比较重要的选项：
target：编译的目标 JavaScript 版本module：编译产出的模块化格式strict：启用严格类型检查esModuleInterop：使得 import/export 能够正常工作sourceMap：生成 source map 文件，方便调试declaration：生成类型声明文件（.d.ts）
在这个配置文件中，我们将 app 目录下的所有文件都包含进去，并指定编译产出的目标是 ES5 并产出 CommonJS 模块。
3. 开始转换
准备工作完成之后，你就可以开始将 AngularJS 代码转换为 TypeScript 代码了。具体步骤如下：
- 导入 AngularJS
在 TypeScript 代码中，需要使用 import 关键字来导入 AngularJS，用法如下：
import * as angular from 'angular';
这里使用了 * as angular 的语法，表示将整个 AngularJS 库导入并起一个别名叫做 angular。
- 定义模块
在 TypeScript 中，使用 module 关键字来定义模块，用法如下：
angular.module('myApp', []);这里的 angular.module 是从导入进来的 AngularJS 库中获取的。
- 定义控制器
在 TypeScript 中，使用 class 关键字来定义类，用法如下：
-- -------------------- ---- -------
----- ------------ -
------------- -
-- ----------- ---- ----
-
------------- -
-- ------ ---- ----
-
-然后，再通过 myModule.controller 来注册控制器，用法如下：
angular.module('myApp').controller('MyController', MyController);这里使用 MyController 类作为控制器的实现。
- 定义服务
在 TypeScript 中，使用 class 关键字来定义类，用法如下：
-- -------------------- ---- -------
----- --------- -
------------- -
-- ----------- ---- ----
-
------------- -
-- ------ ---- ----
-
-然后，再通过 myModule.service 来注册服务，用法如下：
angular.module('myApp').service('MyService', MyService);这里使用 MyService 类作为服务的实现。
- 定义指令
在 TypeScript 中，使用 class 关键字来定义类，用法如下：
-- -------------------- ---- -------
----- ----------- -
------------------- -------- ------------------ -
-- ----------- ---- ----
-
----------- ---------- -------- -------------------- ------ --------------- -
-- ---- -------- ---- ----
-
-然后，再通过 myModule.directive 来注册指令，用法如下：
angular.module('myApp').directive('myDirective', () => new MyDirective());这里使用 MyDirective 类作为指令的实现，并在 directive 方法中使用一个返回类实例的函数来注册指令。
4. 编译 TypeScript 代码
完成了 TypeScript 代码的编写之后，你需要编译它们并在浏览器中运行。在 package.json 中添加一行编译命令：
{
"scripts": {
"watch-ts": "tsc -p tsconfig.json -w"
}
}然后，使用以下命令来启动 TypeScript 编译器：
npm run watch-ts
结论
在本文中，我们深入讨论了如何将已有的 AngularJS 应用转换为 TypeScript，同时提供了详细的步骤和示例代码。众所周知，TypeScript 的出现为前端开发者带来了巨大的便利。在应对复杂性和未知性方面，类型检查和智能代码提示等工具可以大力推动我们的开发速度和质量。所以，如果你的项目没有考虑过 TypeScript，那么现在是开始的好时机了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670e69385f5512810260cbac