javascript - Typescript: การแทนที่คุณสมบัติของคลาสแม่ในคลาสลูก

พิจารณากรณีดังต่อไปนี้:

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 แสดงคุณสมบัติของลูก?

คำตอบ #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

คุณยังสามารถใช้ getter ได้ จากนั้นตัวสร้างของพ่อจะเห็นค่าที่ประกาศในลูก

class Parent {
    get propStr: string {
      return "Hello"
    }
}

class Child extends Parent {
    get propStr: string {
      return "Hi"
    }
}