如何逐步在基于Grunt的AngularJS项目中部分集成TypeScript

嘿，刚好有过类似的渐进式迁移经验，给你整理一套适合Grunt+AngularJS项目的TypeScript集成方案，完全不用一次性重写整个项目，完美匹配你提升代码质量和优化模块化的需求👇

AngularJS本身和TypeScript兼容性很好，旧的JS文件可以和新写的TS文件无缝共存，我们的目标是逐步替换独立模块、工具类，最后再处理核心业务代码，这样既能降低风险，又能快速看到收益。

首先得给Grunt加TypeScript编译能力，推荐用grunt-ts插件：

1. 安装依赖：

npm install grunt-ts typescript --save-dev

2. 在Gruntfile.js里配置ts任务，结合你现有的clean任务：

grunt.initConfig({
  clean: {
    dist: ['dist/'],
    typescript: ['dist/scripts/ts/'] // 专门清理TS编译后的文件
  },
  ts: {
    default: {
      src: ['src/scripts/ts/**/*.ts'], // 你的TS文件目录
      dest: 'dist/scripts/ts/', // 编译输出目录
      options: {
        target: 'es5', // 匹配AngularJS的运行环境
        module: 'amd', // 如果项目用RequireJS就选这个，用CommonJS就选commonjs
        sourceMap: true, // 开启sourcemap方便调试
        allowJs: true, // 允许混合编译JS文件（可选，适合部分迁移时的过渡）
        strict: false, // 先关闭严格模式，后续逐步开启
        noImplicitAny: true // 先开启这个规则提升类型安全
      }
    }
  },
  // 你的其他任务：jsbeautifier、less...
});

// 加载插件
grunt.loadNpmTasks('grunt-ts');

从依赖最少、逻辑独立的文件开始下手，比如工具函数、通用服务：

• 把目标.js文件改成.ts，给函数参数、返回值添加类型注解，比如：

// 原JS工具函数
function calculateTotal(prices) {
  return prices.reduce((sum, p) => sum + p, 0);
}

// 改成TS后
function calculateTotal(prices: number[]): number {
  return prices.reduce((sum, p) => sum + p, 0);
}

• 对于AngularJS的服务/控制器，用$inject结合类型注解，保证依赖注入的类型安全：

class UserService {
  static $inject = ['$http'];
  constructor(private $http: ng.IHttpService) {}

  getUser(id: number): ng.IPromise<{name: string, age: number}> {
    return this.$http.get(`/api/users/${id}`).then(res => res.data);
  }
}

angular.module('app').service('userService', UserService);

• 模块化方面，用ES6的import/export组织代码，Grunt编译时会自动转成对应模块规范（比如AMD），解决原有JS文件体积过大的问题。

结合你现有的jsbeautifier，添加TypeScript代码检查：

1. 安装tslint（或者用更现代的eslint + typescript-eslint）：

npm install tslint --save-dev

2. 在Grunt里配置tslint任务，和现有任务串联：

grunt.initConfig({
  // ...其他配置
  tslint: {
    options: {
      configuration: 'tslint.json' // 根目录创建这个配置文件，定义规则
    },
    files: { src: ['src/scripts/ts/**/*.ts'] }
  }
});

grunt.loadNpmTasks('grunt-tslint');

3. 调整任务顺序，让检查在编译前执行：

grunt.registerTask('build', [
  'clean:dist',
  'clean:typescript',
  'tslint',
  'ts',
  'jsbeautifier', // 可以配置只处理TS文件或编译后的JS
  'less',
  // 你的其他打包、压缩任务
]);

• 把TS编译后的JS文件放到单独目录（比如dist/scripts/ts/），然后在打包时和原有JS文件合并，比如用grunt-contrib-concat：

concat: {
  dist: {
    src: [
      'src/scripts/**/*.js', // 原有JS文件
      'dist/scripts/ts/**/*.js' // 编译后的TS文件
    ],
    dest: 'dist/scripts/bundle.js'
  }
}

• 给现有JS文件添加.d.ts声明文件，让TS文件能正确引用它们，比如原有oldUtils.js，就写oldUtils.d.ts：

declare function formatDate(date: Date): string;

• 不要贪多：每次只迁移1-2个文件，测试通过后再继续，避免引入大量问题。
• 逐步开启严格模式：先从noImplicitAny开始，等项目适应后再开启strict: true，逐步修复类型错误。
• 利用sourcemap调试：开启sourceMap: true后，浏览器开发者工具可以直接定位到TS源码，调试体验和JS一致。

内容的提问来源于stack exchange，提问作者Toby