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

Is it possible to use a constructor function as a type of an argument of another function in TypeScript?

本文关键字：另一个 函数 类型 参数 构造函数 TypeScript 是否      更新时间：2023-09-26

几天前我发现了一种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进行编译。

是的，你可以这样做。查看工作代码笔

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');
  }
}
相关文章：