几天前,我发现了一种TypeScript语言。根据视频评论,对我来说,它看起来非常有前途,因为它为JavaScript带来了适当的代码完成,隐式代码文档,并且可能使它更加类型安全。
我试图用TypeScript重写一个简单的AngularJS应用程序。我想指定参数类型,这些参数将注入到控制器中。假设以下JS代码:
// service.js
angular.module('app').service('MyService', MyService);
function MyService() {
this.test = function test() { console.log('test'); };
}
// controller.js
angular.module('app').controller('MyController', MyController);
function MyController($scope, MyService) {
$scope.test = function test() { MyService.test(); };
}
我正在尝试实现以下目标:
// controller.ts
angular.module('app').controller('MyController', MyController);
function MyController($scope, MyService:MyService) {
// ...
}
因此,使用MyService参数的代码完成功能编写控制器的代码会更容易。但是,此代码使编译器发出error TS2304: Cannot find name 'MyService'
。
我已经尝试了一些方法,并找到了至少2种可能的解决方案。但是,它们都不是理想的。
1)创建一个附加接口,该接口声明服务的所有方法。但是这种方法需要大量其他类型的输入(实际上,我们两次定义了具有完整签名的同一组方法,并且在发生更改的情况下还必须更新一些内容)。当接口实现多次时,这种方式完全可以,但是对于单个AngularJS服务来说看起来是多余的。
2)构造函数可以用一个类代替。这样,可以将类的名称用作参数的类型。但是,这也导致了两个问题:
typescript编译器将类定义转换为闭包,闭包分配给用var
关键字声明的变量(至少与ES5有关)。这要求将AngularJS服务声明放置在文件底部的类定义之后。这增加了忘记执行此操作的可能性。
angular.module('app').service('MyService', MyService);
class MyService {
test() { console.log('test'); }
}
// becomes
angular.module('app').service('MyService', MyService);
var MyService = (function () {
function MyService() {
}
MyService.prototype.test = function () { console.log('test'); };
return MyService;
}());
这样,我们必须将依赖项注入到服务的构造函数中。结果,this.
每次使用依赖项时都必须指定一个多余的字符串。
那么,还有其他方法可以将构造函数作为另一个函数的参数类型来传递吗?谢谢。
PS:我不知道是否有必要,但是我正在将Sublime Text 3与官方的TypeScipt插件和gulp-typescript一起使用进行编译。
是的,您可以这样做。查看工作的CodePen
class MyController
{
static $inject = ['MyService','$scope'];
constructor(private myService:MyService, private $scope:any){
this.$scope.test = this.myService.test;
}
}
class MyService{
test(){
console.log('test');
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句