将AngularJS作为AMD导入到Typescript中

Question

我正在尝试按照github上的教程来设置typescript和angularjs的构建过程。 我必须说实话，我真的很挣扎。 我从github获取项目并将angularjs添加到bower文件，typings和带有angular.ts文件的lib目录（遵循如何设置JQuery）：

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

var angular= angular;
export = angular;

不幸的是，当我尝试以下操作时，我没有运气让我的app模块注册：

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;

我在网上看到相互矛盾的信息有关这种导入类型的角度不可能作为AMD，但绝对打字的打字文件将它导出为AMD所以给出了什么？ gulp构建过程成功完成，但对angular.module的调用则抱怨它不是chrome控制台中的函数。 有没有把角度变成打字稿的技巧所以我可以为我的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模块语法 。

更新

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

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

不再需要打字和tsd。