TypeScript 类 第三章 【抽象类，类的高级技巧】

前言

hello world欢迎来到前端的新世界

---

😜当前文章系列专栏：Typescript
🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力

抽象类

抽象类做为其它派生类的基类使用。 它们一般不会直接被实例化。 不同于接口，抽象类可以包含成员的实现细节。abstract关键字是用于定义抽象类和在抽象类内部定义抽象方法。

abstract class Animal {
    abstract makeSound(): void;<font></font>
    move(): void {
        console.log('roaming the earch...');<font></font>
    }<font></font>
}<font></font>

抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。 抽象方法的语法与接口方法相似。 两者都是定义方法签名但不包含方法体。 然而，抽象方法必须包含 abstract关键字并且可以包含访问修饰符。

abstract class Department {<font></font>
<font></font>
    constructor(public name: string) {<font></font>
    }<font></font>
<font></font>
    printName(): void {
        console.log('Department name: ' + this.name);<font></font>
    }<font></font>
<font></font>
    abstract printMeeting(): void; // 必须在派生类中实现<font></font>
}<font></font>
<font></font>
class AccountingDepartment extends Department {<font></font>
<font></font>
    constructor() {
        super('Accounting and Auditing'); // constructors in derived classes must call super()<font></font>
    }<font></font>
<font></font>
    printMeeting(): void {
        console.log('The Accounting Department meets each Monday at 10am.');<font></font>
    }<font></font>
<font></font>
    generateReports(): void {
        console.log('Generating accounting reports...');<font></font>
    }<font></font>
}<font></font>
<font></font>
let department: Department; // ok to create a reference to an abstract type
department = new Department(); // error: cannot create an instance of an abstract class
department = new AccountingDepartment(); // ok to create and assign a non-abstract subclass<font></font>
department.printName();<font></font>
department.printMeeting();<font></font>
department.generateReports(); // error: method doesn't exist on declared abstract type

---

高级技巧

构造函数

当你在TypeScript里声明了一个类的时候，实际上同时声明了很多东西。 首先就是类的 实例的类型。

class Greeter {<font></font>
    greeting: string;
    constructor(message: string) {
        this.greeting = message;<font></font>
    }<font></font>
    greet() {<font></font>
        return "Hello, " + this.greeting;<font></font>
    }<font></font>
}<font></font>
<font></font>
let greeter: Greeter;<font></font>
greeter = new Greeter("world");
console.log(greeter.greet());

这里，我们写了let greeter: Greeter，意思是Greeter类的实例的类型是Greeter。 这对于用过其它面向对象语言的程序员来讲已经是老习惯了。

我们也创建了一个叫做构造函数的值。这个函数会在我们使用 new创建类实例的时候被调用。下面我们来看看，上面的代码被编译成JavaScript后是什么样子的：

let Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;<font></font>
    }<font></font>
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;<font></font>
    };<font></font>
    return Greeter;<font></font>
})();<font></font>
<font></font>
let greeter;<font></font>
greeter = new Greeter("world");
console.log(greeter.greet());

上面的代码里，let Greeter将被赋值为构造函数。我们当调用 new并执行了这个函数后，便会得到一个类的实例。这个构造函数也包含了类的所有静态属性。换个角度说，我们可以认为类具有 实例部分与静态部分这两个部分。

让我们稍微改写一下这个例子，看看它们之前的区别：

class Greeter {
    static standardGreeting = "Hello, there";<font></font>
    greeting: string;<font></font>
    greet() {<font></font>
        if (this.greeting) {
            return "Hello, " + this.greeting;<font></font>
        }<font></font>
        else {
            return Greeter.standardGreeting;<font></font>
        }<font></font>
    }<font></font>
}<font></font>
<font></font>
let greeter1: Greeter;<font></font>
greeter1 = new Greeter();
console.log(greeter1.greet());<font></font>
<font></font>
let greeterMaker: typeof Greeter = Greeter;<font></font>
greeterMaker.standardGreeting = "Hey there!";<font></font>
<font></font>
let greeter2: Greeter = new greeterMaker();
console.log(greeter2.greet());

---

把类当做接口使用

如上一节里所讲的，类定义会创建两个东西：类的实例类型和一个构造函数。因为类可以创建出类型，所以你能够在允许使用接口的地方使用类。

class Point {
    x: number;
    y: number;
}

interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = {x: 1, y: 2, z: 3};

---

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力