如何在TypeScript中为现有的Angular1 $ filter函数添加类型？

Question

我的过滤器（JavaScript）：

angular.module('foo').filter('bar', function() {
  return function(a, b, c) {
    return a + b + c
  }
})

我的使用者（TypeScript）：

$filter('bar')('a', 'b', 'c') // Error: Cannot invoke an expression whose type lacks a call signature

这是$ filter的输入

如何为过滤器添加类型？ 我尝试了以下方法，但似乎不起作用：

interface BarFilter {
  (a: string, b: string, c: string): string
}

module angular {
  interface IFilterService {
    (name: 'bar'): BarFilter // Error: Specialized overload signature is not assignable to any non-specialized signature
  }
}

Answer 1

就像提到的@basarat一样，您可以在$ filter的每次调用中指定此值，以确定您希望返回的类型，例如，作为如下特定版本：

$filter<BarFilter>("bar")("x", "y", "z")

...这并不比使用类型转换好多少。

另一个选择是扩展ng.IFilterService接口并添加您在此注册的所有过滤器。 然后在注入$filter ，只需指定由YourIFilterService的ng.IFilterService ：

interface YourIFilterService extends ng.IFilterService {
    (name: "bar"): BarFilter
}

并像这样使用它：

class BarController {
    constructor(private $filter: YourIFilterService) {}

    doBarFiltering() {
        var bars = this.$filter("bar")("x", "y", "z")
    }
}

在我看来，这是一种无需花费太多精力就能达到相当不错的类型安全性的好方法，因为无论如何您都要向$filter添加类型（如ng.IFilterService ）。

Answer 2

您需要显式提供类型（注意T不是由$filter声明的任何输入确定的）。 一个快速的：

$filter<Function>('bar')('a', 'b', 'c')