打字稿：覆盖子项中的父项 class 属性

Question

给定以下情况：

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 打印子属性？

Answer 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();

Answer 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");

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

打字稿：覆盖子项中的父项 class 属性

Typescript: Overriding parent class properties in child

javascript

inheritance

overriding

typescript

es6-class