Wie kann ich eine TypeScript-Klasse erweitern, die eine Schnittstelle implementiert, und einige Implementierungen der übergeordneten Klasse überlassen?

Question

Sorry für den langatmigen Titel. Ich benutze ngBootstrap und UIRouter, und ich versuche, eine Unterklasse von Ng2StateDeclaration zu erstellen, die eine ngbModal öffnet und schließt, wie es eintritt und beendet. Ich kann das ohne Vererbung leicht machen, aber ich bin auf der Suche nach einer besseren Lösung.

Heres, was ich habe:

var modalInstance:NgbModalRef; 
class ModalStateDeclaration implements Ng2StateDeclaration { 
    name:string; 
    url:string; 
    onEnter(transition: Transition, state: Ng2StateDeclaration) { 
     modalInstance = modalService.open(SomeComponent); 

     for (var key in transition.params()) { 
      modalInstance.componentInstance[key] = transition.params()[key]; 
     } 

     var currentState = transition.from().name; 
     modalInstance.result.catch(function(reason) { 
      if (currentState) { 
       window.history.back(); 
      } else { 
       stateService.go('home'); 
      } 
     }); 
    } 

    onExit() { 
     modalInstance.close(); 
    } 
} 

export const modalBookState:ModalStateDeclaration = { 
    name: 'modalBookState', 
    url: '/b/:id' 
}; 

Typoskript sagt mir, dass modalBookState ist onEnter und onExit fehlt. Wie kann ich die onEnter und onExit Implementierungen von ModalStateDeclaration verwenden? Muss ich sie mit super() implementieren?

Answer 1

wäre der einfachste Weg, nur die Klasse neu bis kein Objekt Literal zuweisen und einen Konstruktor der Klasse hinzufügen

class ModalStateDeclaration implements Ng2StateDeclaration { 
    constructor(public name:string, public url:string) {} 
    ... 
} 
// The type annotation is optional you could remove :ModalStateDeclaration, I left it in for clarity 
export const modalBookState:ModalStateDeclaration = new ModalStateDeclaration('modalBookState', '/b/:id'); 

Wenn Sie wirklich ein Objektliteral statt Instanziieren Ihre erstellen möchten Klasse, die Sie könnte so etwas tun:

export const modalBookState:ModalStateDeclaration = { 
    onEnter: ModalStateDeclaration.prototype.onEnter, 
    onExit: ModalStateDeclaration.prototype.onExit, 
    name: 'modalBookState', 
    url: '/b/:id' 
}; 

Answer 2

ich gegen die Verwendung von ein Objekt empfehlen würde wörtlichen direkt oder alles andere als ein new ModalStateDelcaration(...) da es instanceof prüft zur Laufzeit fehl.

Ich würde so etwas tun:

const modalBookStateOptions: Partial<ModalStateDeclaration> = { 
    name: 'modalBookState', 
    url: '/b/:id' 
} 

Der Typ Partial<ModalStateDeclaration> bedeutet modalBookStateOptionseinige der Eigenschaften von ModalStateDeclaration hat. (Partial<T> wird in der TypeScript Handbook erwähnt, wenn Sie mehr lesen möchten).

Dann können Sie Ihre tatsächlichen ModalStateDeclaration durch die Zusammenlegung des Teilobjekts in eine neue Instanz der Klasse erstellen:

export const modalBookState: ModalStateDeclaration = Object.assign(new ModalStateDeclaration, modalBookStateOptions); 

Es gibt andere Wege, dies zu tun (@Titian einige andere Optionen gab), aber dies ist wie ich es machen würde.

Viel Glück!