angularjs - 以 AMD 的身份将 AngularJS 导入 Typescript

Question

我正在尝试关注 tutorial在 github 上为 typescript 和 angularjs 建立一个构建过程。我必须说实话，我真的很挣扎。我从 github 获取项目并将 angularjs 添加到 bower 文件、类型和 lib 目录以及 angular.ts 文件(按照 JQuery 的设置方式):

/// <reference path="../typings/tsd.d.ts"/>

var angular= angular;
export = angular;

不幸的是，当我尝试以下操作时，我没有成功注册我的应用程序模块:

import JQuery = require("../lib/JQuery");
import angular = require("../lib/angular");

class A{
  public add(number1:number, number2:number):number{
    return number1+number2;
  }

  public colorBG():void{
    var app = angular.module('myapp',[]);
    $("body").css({"background-color":"black"})
  }
}

export = A;

我在网上看到相互矛盾的信息，关于这种导入类型的 Angular 不可能作为 AMD，但是明确类型的打字文件已将其导出为 AMD，所以给出了什么？ gulp 构建过程成功完成，但对 angular.module 的调用提示它不是 chrome 控制台中的函数。是否有将 Angular 转换为 typescript 的技巧，以便我可以为我的 html 连接一个输出文件？我已经为 AMD 尝试了 requirejs，为 commonjs 尝试了 tsify/browserify，但我都无法正常工作。在此先感谢您的指导。

Answer 1

你需要:

安装依赖的类型定义:

tsd install angular jquery --save

使用 npm 安装依赖:

npm init
npm install angular jquery --save

这意味着您的依赖项将不在 lib 文件夹下。它们将位于 node_modules 文件夹下。

您的 /typings/tsd.d.ts 文件需要包含对所有依赖项的引用:

/// <reference path="./jquery/jquery.d.ts"/>
/// <reference path="./angular/angular.d.ts"/>

然后您可以从您的模块中引用 /typings/tsd.d.ts:

/// <reference path="../typings/tsd.d.ts"/>

import { $ } from "jquery";
import { angular } from "angular";

class A {
  public add(number1:number, number2:number):number{
    return number1+number2;
  }

  public colorBG():void{
    var app = angular.module('myapp',[]);
    $("body").css({"background-color":"black"})
  }
}

export { A };

从 TypeScript 1.5 开始，您应该使用 ES6 module syntax .

更新

从 2.0 开始，推荐的解决方案是 npm:

$ npm install jquery --save
$ npm install @types/jquery --save-dev

不再需要类型和 tsd。