将AngularJS作为AMD导入到Typescript中

发布时间：2020-12-17 17:15:09 所属栏目：安全来源：网络整理

导读：我试图跟随 github上的 tutorial来建立一个打字稿和angularjs的构建过程.我必须说实话,我真的很挣扎.我从github获取项目并将angularjs添加到bower文件,typings和带有angular.ts文件的lib目录(遵循如何设置JQuery)： /// reference path="../typings/tsd.d.ts

我试图跟随 github上的 tutorial来建立一个打字稿和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,我无法工作.提前感谢任何指导.

解决方法

你需要：

安装依赖项的类型定义：

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,[]);
    $("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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!