是否可以使用构造函数作为TypeScript中另一个函数的参数类型?

时间:2016-02-27 13:38:34

标签: javascript angularjs typescript

几天前我找到了一种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.字符串。

那么,有没有其他方法可以将构造函数作为另一个函数的参数类型传递?感谢。

P.S。:我不知道是否有必要,但我正在使用Sublime Text 3和官方的TypeScipt插件以及gulp-typescript进行编译。

1 个答案:

答案 0 :(得分:1)

是的,你可以这样做。见working 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');
  }
}