Ich versuche gerade, etwas Code aufzuräumen, um gegen Schnittstellen statt gegen Implementierungen zu programmieren, kann aber nicht herausfinden, wie.
Um genauer zu sein, verwende ich: * TypeScript 1.5.0 Beta - & gt; auf ES5 / commonjs übertragen * SystemJS zum Laden der Module
Ich versuche derzeit, externe Module wie folgt zu verwenden:
posts.service.ts Datei:
%Vor%und dieses Modul wird in posts.t:
importiert %Vor%Der obige Code wird korrekt kompiliert, aber im Grunde läuft mein Problem darauf hinaus, dass Angular keine Instanz von PostServiceImpl in die Post-Komponente injiziert.
Natürlich liegt es einfach daran, dass ich nicht den richtigen Weg finde, alles zu deklarieren / exportieren / importieren
Ohne export interface PostsService ... bekomme ich TS-Kompilierungsfehler, weil ich sie im Posts-Controller verwende.
Ohne export var PostsService:PostsServiceImpl; bekomme ich TS-Übersetzungsfehler im ViewInjector
Im generierten js-Code finde ich nur exports.PostsService; , das wegen der Exportvariable hinzugefügt wird ... Ich weiß, dass Schnittstellen zur Laufzeit verschwinden.
Also bin ich ein bisschen verloren in all dem. Irgendwelche praktischen Ideen, wie ich Schnittstellen-basierte Programmierung mit TypeScript & amp; Angular 2?
Irgendwelche praktischen Ideen, wie ich Interface-basierte Programmierung mit TypeScript & amp; Angular 2
Schnittstellen werden zur Laufzeit gelöscht. Decorators unterstützen auch keine Schnittstellen. Sie sollten also etwas verwenden, das zur Laufzeit existiert (d. H. Implementierungen).
Sie müssen daran denken, dass Ihre Klasse (und sollte) von Abstraktionen abhängig sein sollte , aber es gibt einen Ort, an dem Sie keine Abstraktion verwenden können: es ist in die Abhängigkeitsinjektion von Angular.
Angular muss wissen, welche Implementierung verwendet werden soll.
Beispiel:
%Vor%In Ihrem Test können Sie also leicht Mocks verwenden, da alle Ihre Controller / Dienste usw. von Abstraktionen abhängig sind. Aber für die reale Anwendung benötigt eckige Implementierungen.
TypeScript erzeugt keine Symbole für Schnittstellen, aber Sie benötigen ein Symbol, um die Abhängigkeitsinjektion zu ermöglichen.
Lösung: Verwenden Sie OpaqueTokens als Ihr Symbol, weisen Sie diesem Token über die Funktion provide () eine Klasse zu und verwenden Sie die Funktion Inject mit diesem Token im Konstruktor Ihrer Klasse.
Im Beispiel hier habe ich davon ausgegangen, dass Sie PostsServiceImpl PostsService in der Post-Komponente zuweisen möchten, da es einfacher ist, zu erklären, wann sich der Code an der gleichen Stelle befindet. Die Ergebnisse des Aufrufs provide () können auch in das zweite Argument von angular.bootstrap (someComponent, arrayOfProviders) oder in das Array [provide] einer Komponente eingefügt werden, die höher als die Post-Komponente in der Hierarchie liegt.
In Komponenten / posts / posts.service.ts:
%Vor%In Ihrem Konstruktor:
%Vor%Tags und Links angular typescript systemjs