将AngularJS导入Typescript作为AMD

Question

我正在尝试遵循github上的教程来建立Typescript和angularjs的构建过程。老实说，我真的很挣扎。我从github上获得了项目，并将angularjs添加到bower文件，类型和带有angular.ts文件的lib目录中（遵循如何设置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;

我在网上看到有关此导入类型的相互冲突的信息，因为角度导入无法作为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。