Implementieren ng.IFilterService in Typoskript

Question

Ich habe folgendes in einer .ts Datei

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); 
} 

und es gibt mir einen Compiler-Fehler von:

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'

ich eine solche Signatur nicht gefunden in angulars Dokumentation. Irgendwelche Vorschläge, wie man diesen Compiler-Fehler in VS2015

Answer 1

loswerden kann Wenn Sie nur wollen, dass es funktioniert und sind nicht besorgt über die Implementierung der "richtigen" Schnittstelle, dann entfernen Sie die implements ng.IFilterService und ändern Sie dann Ihre Angular Registrierungsanweisung, um die Fabrik (dh hinzufügen ())

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

Answer 2

Die IFilterService wird nur programmatische Filter ruft zur Behandlung von Typ Sicherheit über Typoskript Compiler hinzuzufügen.

Die korrekte Implementierung basiert auf der Code wäre:

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); 
} 

Dies ist, wie IAppFilterService wird im Code verwendet werden:

// 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); 
    } 
}