2017-07-20 4 views
0

In einer Anwendung, an der ich arbeite, musste ich einen AngularJS-Filter und eine Direktive in TypeScript v2.4 übersetzen.Erstellen eines Alias ​​für einen Funktionstyp

fand ich ein Muster in dem, was ich die Richtlinie zu tun hatte zu bekommen mit $filter Dienst des AngularJS zu arbeiten - ich die $filter<\T>('???')(value) Überlastung verwenden, um benötigen einen eigenes Telefon Format Filter auf die Richtlinie anzuwenden.

Hier ist der Link-Funktion des übersetzten Richtlinie:

link: (scope: any, elem: any, attrs: any, ctrl: angular.INgModelController) => { 
    const mask: string = '(999) 999-9999'; 

    $(elem).mask(mask); 

    const nonDigitCharacers: RegExp = /[^0-9]/g; 

    elem.on('keydown', (evt: any) => { 
     scope.$evalAsync(elem.triggerHandler.bind(elem, 'change', evt)); 
    }); 

    ctrl.$validators.minLength = (modelValue: string, viewValue: string) => { 
     let minLength: number = 0; 
     if (attrs.minlength) 
      minLength = parseInt(attrs.minlength); 

     let stringValue: string = $filter<(input: string) => string>('tel')(modelValue); 
     let longEnough: boolean = stringValue.length > minLength; 

     // If value not required, and nothing is entered, the value is valid. 
     if (!attrs.required && stringValue.length === 0) 
      return true; 

     // If value is required, and nothing is entered, this value is 'valid'. 
     // The point of this code is to not interfere with a required attribute! 
     if (attrs.required && stringValue.length === 0) 
      return true; 

     return longEnough; 
    }; 

    ctrl.$parsers.unshift((viewValue: string) => { 
     let digitsOnly: string = viewValue.replace(nonDigitCharacers, ''); 
     return digitsOnly; 
    }); 

    ctrl.$formatters.push((value: string) => { 
     return $filter<(input: string) => string>('tel')(value); 
    }); 
} 

... Das, was ich bemerkt habe ist, dass ich $filter<(input: string) => string>('tel')(value) zweimal, dies zu tun haben, sonst wird es nicht zu JavaScript kompiliert werden. Das scheint verschwenderisch, aber - was ich möchte ist zu tun, zu schaffen, was ein C# -Entwickler als Delegierter Namen erkennen könnte, oder was andere Sprachen möglicherweise eine Art Alias, als solche bezeichnen:

// It wouldn't be an interface, but I don't really know what it *would* be... 
export interface IFilterFunctionType = (input: string) => string; 

// Using it... 
return $filter<IFilterFunctionType>('tel')('1234567890'); 

Frage: In welcher Weise, wenn es welche gibt, könnte ich einen Alias ​​eines Funktionstyps in TypeScript 2.4 erstellen?

+0

Ist Ihnen in TypeScript nicht bekannt, dass [type aliases] (https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-aliases)? – jcalz

+0

Ich war nicht. Wenn Sie jedoch eine bessere Möglichkeit finden, diese Antwort zu formulieren, würde ich das als Antwort betrachten. Es gibt eine Menge, die ich nicht über TypeScript weiß, wenn das nicht offensichtlich ist. –

+0

Sicher, nur. Prost. – jcalz

Antwort

1

TypeScript hat tatsächlich type aliases! Wie Sie vermuten, deklarieren Sie es nicht als interface. Stattdessen müssen Sie nur es als type erklären, im wesentlichen die gleiche Syntax Sie verwendet (Zuordnung mit =):

export type IFilterFunctionType = (input: string) => string; 
return $filter<IFilterFunctionType>('tel')('1234567890'); 

Ich empfehle einen Lesedurch des TypeScript Handbook nehmen, wenn Sie die Zeit haben, wie es enthält andere Goodies, die Sie beim Programmieren in TypeScript nützlich finden könnten. Ich hoffe, das hilft.

Verwandte Themen