5.类 - 《Typescript学习》

1. 继承后子类中的构造函数
2. 修饰符
3. 构造函数-参数属性
4. 静态属性
5. 抽象类
6. getter和setter

学过Java的都知道面向对象和类class的思想。在ES2015 也就是 ES6 中，也为我们提供了类的写法。已经学过了就不多赘述了，在TS中，我们只需要给类中的成员添加类型即可：

class People {
  name: string;  // 成员变量
  // 构造方法
  constructor(name) {
    this.name = name
  }
}
let ming = new People("ming")  // new 会调用构造方法

很简单不是吗？所以这里我们只重点提几个需要注意的细节：

1. 继承后子类中的构造函数

和在Java中一样，子类继承会继承父类的成员和方法，其中也包括构造方法。如果子类中没有显示的写出构造函数，编译时则会隐式的调用父类的构造函数，也就是super()方法：

class People {
  name: string;
  constructor(name) {
    this.name = name
  }
}
class Teacher extends People {}
let t = new Teacher("hong")
console.log(t);  // Teacher {name: "hong"}

可以看到，在子类Teacher中并没有明确的写出构造函数constructor，所以会隐式的调用父类的构造函数。
但是！！如果你在子类中显示的添加了构造函数时，则需要 明确、显示 的调用super()函数：

class People {
  name: string;
  constructor(name) {
    this.name = name
  }
}
class Teacher extends People {
  place: string
  // 子类中显示的写出了构造函数，则必须使用super()继承调用父类的构造函数
  constructor(name, place) {
    super(name);  // 必须写出，否则报错
    this.place = place
  }
}
let t = new Teacher("hong","gdupt")
console.log(t);

可以看到：派生类（子类）的构造函数必须调用super方法。简单来说就是：子类里，你要不就不写构造函数，写了就要明确调用super()

2. 修饰符

和Java一样，TS的类里也有修饰符，总共有四种：public、protected、private、readonly。注意参数修饰符只能在TS中用，JS里是没有的。并且TS中的修饰符既可以对成员使用，也可以对构造函数中的参数使用。

默认为 public

在上面的例子里，我们可以自由的访问程序里定义的成员。如果你对其它语言中的类比较了解，就会注意到我们在之前的代码里并没有使用 public来做修饰；例如，C#要求必须明确地使用 public指定成员是可见的。在TypeScript里，成员都默认为 public。
你也可以明确的将一个成员标记成 public：

class Person {
  public name: string
  public constructor(name) {
    this.name = name
  }
  public do(plan) {
    console.log("我要" + plan);
  }
}

私有 private

和其他面向对象的语言一样，private修饰的成员只能在声明的类的内部被访问，任何其他地方，包括它的子类都不能再访问、修改、声明这个属性，是该类私有的、独有的成员。
子类也会继承使用private修饰的成员，但是子类中无法再单独声明这个成员，并且也不能通过this访问自己的这个私有成员，即使自己隐式的有用它，以下子类中对私有成员的调用中就会报错：

class Priv {
  private name: string
  constructor(name) {
    this.name = name
  }
}
class Employee extends Priv {
  constructor(name: string) {
    super(name)
  }
  public getElevatorPitch() {
    return `Hello, my name is ${this.name}.`;  // 错误
  }
}

我们创建一个实例，看看这个类实例的内部属性：

let e = new Employee("ricky")
console.log(e);

可以看到，该实例是已经继承了父类中的私有成员 name ，但即使如此也无法访问从父类继承来的私有成员。更不用说类的外部了。

受保护的 protected

protected与private类似，但是就没那么严格了，在子类中是可以访问protected修饰的成员的。当然，在类外仍然是无法访问该成员的。

class Person {
    protected name: string;
    constructor(name: string) { this.name = name; }
}
class Employee extends Person {
    private department: string;
    constructor(name: string, department: string) {
        super(name)
        this.department = department;
    }
    public getElevatorPitch() {
        return `Hello, my name is ${this.name} and I work in ${this.department}.`;
    }
}
let howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPitch());
console.log(howard.name); // 错误

构造函数也可以被标记成 protected。这意味着这个类不能在包含它的类外被实例化，但是能被继承。比如，

class Person {
    protected name: string;
    protected constructor(theName: string) { this.name = theName; }
}
// Employee 能够继承 Person
class Employee extends Person {
    private department: string;
    constructor(name: string, department: string) {
        super(name);
        this.department = department;
    }
    public getElevatorPitch() {
        return `Hello, my name is ${this.name} and I work in ${this.department}.`;
    }
}
let howard = new Employee("Howard", "Sales");
let john = new Person("John"); // 错误: 'Person' 的构造函数是被保护的.

readonly修饰符

你可以使用 readonly关键字将属性设置为只读的。只读属性必须在声明时或构造函数里被初始化。

class Octopus {
    readonly name: string;
    readonly numberOfLegs: number = 8;  // 声明时初始化
    constructor (theName: string) {
        this.name = theName;  // 在构造函数里初始化 也可以
    }
}
let dad = new Octopus("Man with the 8 strong legs");
dad.name = "Man with the 3-piece suit"; // 错误! name 是只读的.

对于使用了修饰符的类型检查

TypeScript使用的是结构性类型系统。当我们比较两种不同的类型时，并不在乎它们从何处而来，如果所有成员的类型都是兼容的，我们就认为它们的类型是兼容的。
然而，当我们比较带有 private或 protected成员的类型的时候，情况就不同了。如果其中一个类型里包含一个 private成员，那么只有当另外一个类型中也存在这样一个 private成员，并且它们都是来自同一处声明时，我们才认为这两个类型是兼容的。对于 protected成员也使用这个规则。

class Animal {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}
class Rhino extends Animal {
    constructor() { super("Rhino"); }
}
class Employee {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}
let animal = new Animal("Goat");
let rhino = new Rhino();
let employee = new Employee("Bob");
animal = rhino;
animal = employee; // 错误: Animal 与 Employee 不兼容.

这个例子中有 Animal和 Rhino两个类， Rhino是 Animal类的子类。还有一个 Employee类，其类型看上去与 Animal是相同的。我们创建了几个这些类的实例，并相互赋值来看看会发生什么。因为 Animal和 Rhino共享了来自 Animal里的私有成员定义 private name: string，因此它们是兼容的。然而 Employee却不是这样。当把 Employee赋值给 Animal的时候，得到一个错误，说它们的类型不兼容。尽管 Employee里也有一个私有成员 name，但它明显不是 Animal里面定义的那个。

3. 构造函数-参数属性

TS类中对于修饰符，还有一个很方便的特性就是参数属性。参数属性只能在构造函数的形参列表中使用。
简单来说就是：如果在类的构造函数的形参列表中，用修饰符修饰了一个参数，则会自动在类内部创建一个同名，同修饰符的成员变量，并且会自动将传入构造函数的值赋予它。
举例来说，以下两种写法是等价的：
一般写法：

class Octopus {
    public name: string;
    constructor (name: string) {
        this.name = name;  
    }
}
let dad = new Octopus("Octor");

使用参数属性的写法：

class Octopus {
    constructor (public name: string) {
        // this.name = name;  因为已经在参数列表中增加了修饰符，现在你不再需要这句定义了
    }
}
let dad = new Octopus("Octor");

可以看到，我们仅仅是省略了 public name: string; 和 this.name = name; 这两步，将该定义和构造函数的形参合并在了一起，这是因为在构造函数的形参中定义了 public name: string; ，那么编译时会自动创建一个同名同修饰符的变量，也就是public name: string; 并且会将传入形参的值自动赋予这个同名变量，也就是this.name = name; ，这个功能可以简化我们的代码，十分好用。
这个特性对所有修饰符都是通用的，包括上述的四种修饰符。

4. 静态属性

理所当然啦，static ，类的静态属性可以直接通过类名.属性名调用，而不需要实例化。

class Factory {
  static time: Date = new Date()
  static getTime() { 
    return Factory.time  // 静态属性即使在类中 也要通过类名来调用，不能通过this
  }
}

注意，静态属性即使在类中也要通过类名来调用，不能通过this访问，因为this只能访问到实例中的成员，即动态部分的属性，而static修饰的是静态部分，构造函数也属于静态部分。

5. 抽象类

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

abstract class Animal {
    abstract makeSound(): void;  // 抽象方法，子类必须实现
    // 非抽象方法可以有具体实现：
    move(): void {
        console.log('roaming the earch...');
    }
}

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

6. getter和setter

对于类来说最重要的特性就是封装了，我们有时不希望实例可以直接修改成员的值，而是必须通过一个set方法来设置，并且通过get方法来获取，经典的JavaBean封装模式，将成员变量设置为private，然后通过get和set来访问或修改它。
在TS中为我们提供了 get 和 set 关键字，来表示后面这个方法是一个getter或者setter，但首先，要求你将编译器设置为输出ECMAScript 5或更高。不支持降级到ECMAScript 3。
它的用法和自己封装的方式差不多，但是以下是我们推荐的格式，这也是在 ES6 中 Proxy 代理对象所用的方法，当你给一个属性赋值时，实际上是调用了 set 方法，当你直接读取一个值时其实是调用了 get 方法。

let passcode = "secret passcode";
class Employee {
    private _fullName: string;
    get fullName(): string {
        return this._fullName;
    }
    set fullName(newName: string) {
        if (passcode && passcode == "secret passcode") {
            this._fullName = newName;
        }
        else {
            console.log("Error: Unauthorized update of employee!");
        }
    }
}
let employee = new Employee();
employee.fullName = "Bob Smith";  // 这里调用了set fullName 的方法 等价于fullName("Bob Smith")
if (employee.fullName) {
    alert(employee.fullName);  // 这里调用了 get fullName 的方法 等价于fullName()
}

或者，你也可以像在Java里一样自己写原始的 get 和 set：

let passcode = "secret passcode";
class Employee {
    private _fullName: string;
    // 仅仅是修改了名字，并去掉了set 和get关键字
    getFullName(): string {
        return this._fullName;
    }
    setFullName(newName: string) {
        if (passcode && passcode == "secret passcode") {
            this._fullName = newName;
        }
        else {
            console.log("Error: Unauthorized update of employee!");
        }
    }
}
let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
    alert(employee.fullName);
}

显然，第一种更加符合JS的设计节奏，更像ES6的Proxy对象。