TypeScript--类（class）

ES6 中的类

传统的 JavaScript 程序使用函数和基于原型的继承来创建可重用的组件，但对于熟悉使用面向对象方式的程序员来讲就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来的。从ECMAScript 2015，也就是 ECMAScript 6开始，JavaScript 程序员将能够使用基于类的面向对象的方式。使用 TypeScript，我们允许开发者现在就使用这些特性，并且编译后的 JavaScript 可以在所有主流浏览器和平台上运行，而不需要等到下个 JavaScript 版本。

我们在 es6 中是这样写类的，新建个 index.js 文件

class Point{ // 创建了一个类，类名为 Point

    constructor (x,y) {  // 构造方法，相当于 python 类中的 __init__ 方法
      this.x = x;
      this.y = y;
    }
    getpoint(){
      return `(${this.x},${this.y})`
    }
  }
  
const p1 = new Point(1,2)  // 实例化类
console.log(p1)
console.log(p1.getpoint()) // 调用 getpoint 方法

TypeSctipt 中的类

class Greeter {  // 声明一个Greeter类
  greeting: string;  // greeting的属性

  constructor(message: string) {  // 构造函数
      this.greeting = message;
  }
  greet() {  // greet方法
      return "Hello, " + this.greeting;
  }
}

// 使用 new 构造了 Greeter 类的一个实例。 它会调用之前定义的构造函数，创建一个 Greeter 类型的新对象，并执行构造函数初始化它。
let greeter = new Greeter("world");

我们声明一个 Greeter 类。这个类有3个成员：一个叫做 greeting 的属性，一个构造函数和一个 greet 方法。

你会注意到，我们在引用任何一个类成员的时候都用了 this。它表示我们访问的是类的成员。

最后一行，我们使用 new 构造了 Greeter 类的一个实例。它会调用之前定义的构造函数，创建一个 Greeter 类型的新对象，并执行构造函数初始化它。

继承

在 TypeScript 里，我们可以使用常用的面向对象模式。基于类的程序设计中一种最基本的模式是允许使用继承来扩展现有的类。

class Animal {
  move(distanceInMeters: number = 0) {
      console.log(`Animal moved ${distanceInMeters}m.`);
  }
}

class Dog extends Animal {  // Dog 类继承了 Animal 类
  bark() {
      console.log('Woof! Woof!');
  }
}

const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();

类从基类中继承了属性和方法。这里，Dog 是一个派生类，它派生自 Animal 基类，通过 extends 关键字。派生类通常被称作子类，基类通常被称作超类。

因为 Dog 继承了 Animal 的功能，因此我们可以创建一个 Dog 的实例，它能够 bark() 和 move()。

class Animal {
  name: string;
  constructor(theName: string) { this.name = theName; }
  move(distanceInMeters: number = 0) {
      console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}

class Snake extends Animal {
  constructor(name: string) {
     super(name);  // 必须调用super()
    }

  move(distanceInMeters = 5) {
      console.log("Slithering...");
      super.move(distanceInMeters);
  }
}

class Horse extends Animal {
  constructor(name: string) { 
    super(name); // 必须调用super()
  }

  move(distanceInMeters = 45) {
      console.log("Galloping...");
      super.move(distanceInMeters);
  }
}

let sam = new Snake("Sammy the Python");
let tom: Animal = new Horse("Tommy the Palomino");

sam.move();
tom.move(34);

这一次，我们使用 extends 关键字创建了 Animal 的两个子类：Horse 和 Snake。

与前一个例子的不同点是，派生类包含了一个构造函数，它必须调用 super()，它会执行基类的构造函数。而且，在构造函数里访问 this 的属性之前，我们一定要调用 super()。这个是 TypeScript 强制执行的一条重要规则。

这个例子演示了如何在子类里可以重写父类的方法。 Snake 类和 Horse 类都创建了 move 方法，它们重写了从 Animal 继承来的 move 方法，使得 move 方法根据不同的类而具有不同的功能。注意，即使 tom 被声明为 Animal 类型，但因为它的值是 Horse，调用 tom.move(34) 时，它会调用 Horse 里重写的方法

公共，私有与受保护的修饰符

默认为`public`

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

你也可以明确的将一个成员标记成public。我们可以用下面的方式来重写上面的Animal类：

class Animal {
    public name: string;
    public constructor(theName: string) { this.name = theName; }
    public move(distanceInMeters: number) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

`private`

当成员被标记成 private 时，它就不能在声明它的类的外部访问。比如：

class Animal {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}

new Animal("Cat").name; // 错误: '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); // 错误

我们不能在 Person 类外使用 name，但是我们仍然可以通过 Employee 类的实例方法访问，因为 Employee 是由 Person 派生而来的。

构造函数也可以被标记成 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
  readonly numberOfLegs: number = 8;  // readonly
  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 是只读的.

参数属性

在上面的例子中，我们不得不定义一个受保护的成员 name 和一个构造函数参数 theName 在 Person 类里，并且立刻给 name 和 theName 赋值。这种情况经常会遇到。参数属性可以方便地让我们在一个地方定义并初始化一个成员。下面的例子是对之前 Animal 类的修改版，使用了参数属性：

class Animal {
    constructor(private name: string) { }
    move(distanceInMeters: number) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

注意看我们是如何舍弃了 theName，仅在构造函数里使用 private name: string 参数来创建和初始化 name 成员。我们把声明和赋值合并至一处。

参数属性通过给构造函数参数添加一个访问限定符来声明。使用 private 限定一个参数属性会声明并初始化一个私有成员；对于 public 和 protected 来说也是一样。

静态属性

到目前为止，我们只讨论了类的实例成员，那些仅当类被实例化的时候才会被初始化的属性。我们也可以创建类的静态成员，这些属性存在于类本身上面而不是类的实例上。在这个例子里，我们使用static 定义 origin，因为它是所有网格都会用到的属性。每个实例想要访问这个属性的时候，都要在 origin 前面加上类名。如同在实例属性上使用 this.前缀来访问属性一样，这里我们使用Grid.来访问静态属性。

class Grid {
    static origin = {x: 0, y: 0};
    calculateDistanceFromOrigin(point: {x: number; y: number;}) {
        let xDist = (point.x - Grid.origin.x);
        let yDist = (point.y - Grid.origin.y);
        return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
    }
    constructor (public scale: number) { }
}

let grid1 = new Grid(1.0);  // 1x scale
let grid2 = new Grid(5.0);  // 5x scale

console.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10}));
console.log(grid2.calculateDistanceFromOrigin({x: 10, y: 10}));

抽象类

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

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

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

abstract class Department {

    constructor(public name: string) {
    }

    printName(): void {
        console.log('Department name: ' + this.name);
    }

    abstract printMeeting(): void; // 必须在派生类中实现
}

class AccountingDepartment extends Department {

    constructor() {
        super('Accounting and Auditing'); // 在派生类的构造函数中必须调用 super()
    }

    printMeeting(): void {
        console.log('The Accounting Department meets each Monday at 10am.');
    }

    generateReports(): void {
        console.log('Generating accounting reports...');
    }
}

let department: Department; // 允许创建一个对抽象类型的引用
department = new Department(); // 错误: 不能创建一个抽象类的实例
department = new AccountingDepartment(); // 允许对一个抽象子类进行实例化和赋值
department.printName();
department.printMeeting();
department.generateReports(); // 错误: 方法在声明的抽象类中不存在

posted @ 2021-10-24 22:32 邹邹很busy。阅读(276) 评论(0) 编辑收藏举报

刷新页面返回顶部

邹邹很busy。

被测试耽搁的打工人。少年不努力，长大搞 IT。

TypeScript--类（class）

ES6 中的类

TypeSctipt 中的类

继承

公共，私有与受保护的修饰符

默认为`public`

`private`

`protected`

readonly修饰符

参数属性

静态属性

抽象类

公告

邹邹很busy。

被测试耽搁的打工人。少年不努力，长大搞 IT。

TypeScript--类（class）

ES6 中的类

TypeSctipt 中的类

继承

公共，私有与受保护的修饰符

默认为public

private

protected

readonly修饰符

参数属性

静态属性

抽象类

公告

默认为`public`

`private`

`protected`