Question

如何在抽象类的方法中获取子类的属性？

abstract class Parent {

    id: string;

    logProps() {
        // HOW can I log all properties of a child class
        // and their values? For example, the name.
    }
}

class Child extends Parent {

    name: string;

    constructor(name) {
        super();
        this.name = name;
    }
}

const child = new Child("Daniel");
child.logProps();

Answer 1

我对您的代码做了一些改进，您缺少的是缺少super()，这说明子类继承了其父类的所有属性。同样，parrent类中的属性需要标记为抽象，或者需要在parrent类中实现。

abstract class Parent {
abstract id: string;

 abstract logProps(): Parent; // make abstract or implement here
}

class Child extends Parent {
    id: string;
    name: string;

    constructor(name: string) {
       super();
       this.id = ""//some initial value
       this.name = name;
  }

    logProps(): Parent {
       return this;
    }
} 

const child = new Child("Daniel");
child.logProps();

我选择使所有属性抽象，您也可以删除abstract关键字并在父类中实现该方法。

编辑

我有另一个实现，您可以在parrent类中定义该方法，只需登录this，它将包含所有属性。

abstract class Parent {

id: string = "DEFAULT VALUE";

logProps() {
    console.log(this); // Using this, this contains all properties
 }
}

class Child extends Parent {

name: string;

constructor(name: string) {
    super();
    this.name = name;
 }
}

const child = new Child("Daniel");
child.logProps();

Answer 2

<section class="people">
        <div class="row no-gutters justify-content-center">
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card" style="background-image: url('https://via.placeholder.com/600')">
                    <div class="card-hover">
                        <div class="card-body">
                            <h4 class="card-title">Jane Doe</h4>
                            <h5 class="card-subtitle">Managing Director</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu
                                orci
                                non
                                erat eleifend pellentesque. Proin eleifend libero in risus viverra venenatis.</p>
                            <p class="card-text">Donec interdum turpis sit amet dapibus fringilla. Mauris volutpat
                                suscipit
                                ullamcorper. Sed elementum, odio sit amet molestie congue, arcu nunc tempus nisl,
                                vel
                                auctor
                                tellus urna ac orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
                                sit
                                amet
                                eros elementum odio sagittis commodo.</p>
                            <p class="card-text">Vestibulum hendrerit aliquam nunc, vitae fermentum est finibus ac.
                                Vivamus
                                porta velit id tempus hendrerit.</p>
                        </div>
                        <div class="card-footer row no-gutters">
                            <div class="col text-left p-0">
                                <ul class="list-unstyled">
                                    <li><a href="#" class="card-link"><i
                                                class="fas fa-envelope fa-fw"></i>test@domain.com</a>
                                    </li>
                                    <li><a href="#" class="card-link"><i class="fas fa-phone fa-fw"></i>+44 (0)123
                                            456
                                            7890</a></li>
                                    <li><a href="#" class="card-link"><i class="fas fa-mobile fa-fw"></i>+44 (0)123
                                            456
                                            7890</a></li>
                                </ul>
                            </div>
                            <div class="col text-right p-0 align-self-end">
                                <ul class="list-inline">
                                    <li class="list-inline-item m-0">
                                        <a href="#">
                                            <span class="fa-stack fa-stack-lg" style="vertical-align: top;">
                                                <i class="far fa-circle fa-stack-3x"></i>
                                                <i class="fab fa-linkedin-in fa-stack-1x"></i>
                                            </span></i>
                                        </a>
                                    </li>
                                    <li class="list-inline-item m-0">
                                        <a href="#">
                                            <span class="fa-stack fa-stack-lg" style="vertical-align: top;">
                                                <i class="far fa-circle fa-stack-3x"></i>
                                                <i class="fab fa-twitter fa-stack-1x"></i>
                                            </span></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

打字稿：从父类获取扩展类的属性

2 个答案: