如何扩展实现接口的TypeScript类，并将某些实现留给父类？

对不起，这个漫长的标题。我使用的是ngBootstrap和UIRouter，我试图创建一个Ng2StateDeclaration的子类，它打开并关闭ngbModal进入和退出。我可以很容易地做到这一点，而不需要继承，但是我需要更好的解决方案。如何扩展实现接口的TypeScript类，并将某些实现留给父类？

继承人什么我有：

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

打字稿告诉我，modalBookState缺少onEnter和onExit。我如何使用ModalStateDeclaration的onEnter和onExit实现？我是否需要使用super()来实现它们？

来源

2017-08-24 Matt Lyons

最简单的方法是只新的了类不分配对象文本它和一个构造函数添加到类

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

如果你真的想创建一个对象字面，而不是现化类，你可以做这样的事情：

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

来源

2017-08-24 10:41:50

我建议不要直接使用文本对象，或任何东西，但new ModalStateDelcaration(...)，因为它会在运行时失败instanceof检查。

我会做这样的事情：

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

类型Partial<ModalStateDeclaration>意味着modalBookStateOptions有ModalStateDeclaration属性一些。（Partial<T>在TypeScript Handbook中被提及，如果你想阅读更多）。

然后，您可以通过合并部分对象到类的新实例创建您的实际ModalStateDeclaration：

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

还有其他的方法来做到这一点（@Titian给了一些其他的选择），但它我怎么去做。

祝你好运！

来源

2017-08-24 17:30:31 jcalz

如何扩展实现接口的TypeScript类，并将某些实现留给父类？

回答

相关问题