在 Typescript 中实现 ng.IFilterService

Question

我在 .ts 文件中有以下内容

module App.Filters {
    export class SplitRangeFilter implements ng.IFilterService {
        static $inject = ['$filter'];

        public static factory(): Function {
            return (input: string, splitIndex: number) => {
                return input.split('-')[splitIndex];
            }
        }
    }

    angular.module("App.Filters", []).filter('SplitRange', () => SplitRangeFilter.factory);
}

它给我一个编译器错误：

Class SplitRangeFilter declared interface IFilterService but does not implement it: Types 'SplitRangeFilter' and 'IFilterService' have incompatible signatures. No matching signature for '<T>(name: string) => T'

我在 angulars 文档中找不到任何这样的签名。关于如何在 VS2015 中消除此编译器错误的任何建议

Answer 1

如果你只是想让它工作而不关心实现 "right" 接口然后删除 implements ng.IFilterService 然后更改你的 Angular 注册语句以执行工厂（即添加 ())

angular.module("App.Filters", []).filter('SplitRange', () => SplitRangeFilter.factory());

Answer 2

IFilterService 仅用于通过 TypeScript 编译器向编程过滤器调用添加类型安全。

基于您的代码的正确实现是：

module App.Filters {
    // Add filter type to the filter service so that TypeScript can
    // perform type  checking on future programmatic invokes.
    // This app filter service
    export interface IAppFilterService extends angular.IFilterService {
        (name: 'SplitRange'): (input: string | splitIndex: number) => string | undefined;
    }
    export class SplitRangeFilter {
        constructor() {
            return (input: string, splitIndex: number): string | undefined => {
                return input.split('-')[splitIndex];
            }
        }
    }

    angular.module("App.Filters", []).filter('SplitRange', SplitRangeFilter);
}

这就是 IAppFilterService 在您的代码中的使用方式：

// Usage for IAppFilterService
class AppController {
    constructor(private $filter: IAppFilterService) {}

    // This will pass without compile warnings
    public splitString(val: string, index: number): string | undefined {
        return this.$filter('SplitRange')(val, number);
    }

    // This will throw compile time TypeScript error
    public splitNumber(val: number, index: number): string | undefined {
        return this.$filter('SplitRange')(val, number);
    }
}

在 Typescript 中实现 ng.IFilterService

Implement ng.IFilterService in Typescript

javascript

angularjs

typescript

angularjs-filter