打字稿：覆盖子类中的父类属性答案

【问题标题】：Typescript: Overriding parent class properties in child打字稿：覆盖子类中的父类属性
【发布时间】：2017-07-11 02:04:43
【问题描述】：

鉴于以下情况：

class Parent {
    propStr = "Hello";
    propNum = 42;

    constructor(propShared) {
        console.log(this.propStr); // Hello
        console.log(this.propNum); // 42
        console.log(propShared); // w/e
    }
}

class Child extends Parent {
    propStr = "Hi"; // overridden
    propNum = 1337; // overridden

    constructor(propShared) {
        super(propShared);
    }
}

let c = new Child("Foobar");

如何确保正确覆盖父属性以便 console.log 打印子属性？

【问题讨论】：

标签： javascript typescript inheritance overriding es6-class

【解决方案1】：

您正在从父构造函数中记录属性，它们尚未被super() 之后运行的子构造函数代码覆盖。您应该只在构造函数中进行初始化，而不是执行任何副作用：

class Parent {
    propStr = "Hello";
    propNum = 42;

    log() {
        console.log(this.propStr);
        console.log(this.propNum);
    }
}

class Child extends Parent {
    propStr = "Hi"; // overridden
    propNum = 1337; // overridden
}

const c = new Child("Foobar");
c.log()

如果您希望初始化依赖于其他地方选择的内容，包括子类，请将它们设为参数。你仍然可以给他们合理的默认值：

class Parent {
    constructor(propStr = "Hello", propNum = 42, propShared) {
        this.propStr = propStr;
        this.propNum = propNum;
        this.propShared = propShared;
    }
    log() {
        console.log(this.propStr);
        console.log(this.propNum);
        console.log(this.propShared);
    }   
}

class Child extends Parent {
    constructor(propShared) {
        super("Hi", 1337, propShared);
    }
}

const c = new Child("Foobar");
c.log();

【讨论】：

【解决方案2】：

既然你提到了打字稿，你可以使用打字稿的一个特性，叫做Parameter Properties：

class Parent {
    constructor(public propStr = "Hello", public propNum = 42, public propShared: any) {
        console.log(this.propStr); // Hello
        console.log(this.propNum); // 42
        console.log(this.propShared); // w/e
    }
}

class Child extends Parent {
    constructor(propShared: any) {
        super("Hi", 1337, propShared);
    }
}

let c = new Child("Foobar");

输出将完全符合您的预期。

【讨论】：