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

【问题标题】：How can I extend a TypeScript class that implements an interface, and leave some implementations to the parent class?如何扩展实现接口的 TypeScript 类，并将一些实现留给父类？
【发布时间】：2017-08-24 10:37:12
【问题描述】：

对不起，冗长的标题。我正在使用 ngBootstrap 和 UIRouter，我正在尝试创建 Ng2StateDeclaration 的子类，它在进入和退出时打开和关闭 ngbModal。我可以在没有继承的情况下轻松做到这一点，但我想要一个更简洁的解决方案。

这就是我所拥有的：

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

TypeScript 告诉我 modalBookState 缺少 onEnter 和 onExit。如何使用来自ModalStateDeclaration 的onEnter 和onExit 实现？我需要用super() 来实现它们吗？

【问题讨论】：

标签： typescript inheritance

【解决方案1】：

最简单的方法是新建一个类而不给它分配一个对象字面量，然后给类添加一个构造函数

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

【讨论】：

【解决方案2】：

我建议不要直接使用对象字面量，也不要使用 new ModalStateDelcaration(...) 以外的任何东西，因为它会在运行时无法通过 instanceof 检查。

我会这样做：

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

Partial<ModalStateDeclaration> 类型意味着modalBookStateOptions 具有ModalStateDeclaration 的一些属性。（如果您想了解更多信息，TypeScript Handbook 中提到了Partial<T>。

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

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

还有其他方法可以做到这一点（@Titian 提供了一些其他选项），但这就是我的做法。

祝你好运！

【讨论】：