TypeScript 之类 | 24K博客

TypeScript

发布日期: 2019-10-09

文章字数: 3.7k

阅读时长: 15 分

阅读次数:

介绍

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

类

下面来看一个使用 类 的例子：

class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return 'Hello,' + this.greeting;
  }
}
let greeter = new Greeter('World');
console.log(greeter); // {greeting: 'World'}
greeter.greet(); // Hello,World

如果你使用过 C# 或 Java，你会对这种语法非常熟悉。我们声明一个 Greeter 类，这个类有三个成员：

一个 greeting 的属性
一个构造函数
一个 greet 方法

你会注意到，我们在引用任何一个类的成员的时候，都用了 this ，它表示我们访问的是类的成员。
最后一行，我们用 new 构造了 Greeter 类的一个实例。它会调用之前定义的构造函数，创建一个 Greeter 类型的新对象，并执行构造函数初始化它。

继承

在 TypeScript 里，我们可以使用常用的面向对象模式。基于类的程序设计中一种最基本的模式是：允许使用继承类拓展现有的类。
看下面 👇 的例子 🌰：

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

class Dog extends Animal {
  bark() {
    console.log('Woof! Woof!');
  }
}

const dog = new Dog();
dog.bark(); // Woof! Woof!
dog.move(10); // Animal moved 10m.
dog.bark(); // Woof! Woof!

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

基类：在面向对象设计中，被定义为包含所有实体共性的 class 类型。已存在的用来派生新类的类称为基类，又称父类。
派生类：从已定义类产生新类的过程称为派生，由已存在的类派生出来的新类称为派生类，又称子类。

因为 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);
  }
  move(distanceInMeters = 5) {
    console.log('Slithering');
    super.move(distanceInMeters);
  }
}

class Horse extends Animal {
  constructor(name: string) {
    super(name);
  }
  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(); // Slithering  Sammy the Python moved 5m.
tom.move(34); // Galloping  Tommy the Palomino moved 34m.

这个例子展示了一些上面没有提到的特性。这一次我们使用 extends 关键字创建了 Animal 的两个子类： Snake 和 Horse 。

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

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

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

`公共 public`

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

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

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

`私有 private`

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

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

new Animal('Cat').name;
// error： Property 'name' is private and only accessible within class 'Animal'

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;
  consoructor(theName: string) {
    this.name = theName;
  }
}

let animal = new Animal('Goat');
let rhino = new Rhino();
let employee = new Employee('Bob');

animal = rhino; // okay
animal = employee; // 错误：Animal 与 Employee 不兼容.

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

`受保护的 protected`

protected 修饰符与 private 修饰符的行为很相似，但有一点不同， protected 成员在派生类中仍然可以访问。例如：

class Person {
  protected name: string;
  constructor(theName: string) {
    this.name = theName;
  }
}

class Empolyee extends Person {
  private department: string;

  constructor(theName: string, department: string) {
    super(theName);
    this.department = department;
  }

  public getElevatorPitch() {
    return `Hello, my name is ${this.name} and I work in ${this.department}.`;
  }
}

let howard = new Empolyee('Howard', 'Sales');
console.log(howard);
// {name: 'Howard', department: 'Sales'}

console.log(howard.getElevatorPitch());
//  Hello, my name is Howard and I work in Sales.

console.log(howard.name);
// 错误：属性 'name' 受保护，并且只能在类 'Person' 及其子类中访问

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

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

class Person {
  protected name: string;
  protected constructor(theName) {
    this.name = theName;
  }
}

// Empooyee 能继承 Person
class Employee extends Person {
  private department: string;

  constructor(theName: string, department: string) {
    super(theName);
    this.department = department;
  }

  public getElevatorPitch() {
    return `Hello, my name is ${this.name} and I work in ${this.department}.`;
  }
}

let howard = new Employee('Howard', 'Sales'); // okay
let john = new Person('John'); // 错误：Person 的构造函数是被保护的

reanonly 修饰符

你可以使用 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');

console.log(dad);
// {numberOfLegs: 8, name: 'Man with the 8 strong legs'}

dad.name = 'Man with the 3-piece suit';
// 错误：name 是只读的.

参数属性

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

class Octopus {
  readonly numberOfLegs: number = 8;
  constructor(readonly name: string) {}
}

注意看我们是如何舍弃了 theName，仅在构造函数里使用 readonly name: string，参数来创建和初始化 name 成员。我们把声明和赋值合并至一处。
参数属性通过构造函数参数前面添加一个访问限定符来声明。使用 private 限定一个参数属性会声明并初始化一个私有成员；对于 public 和 protected 来说也是一样。

存取器

TypeScript 支持通过 getter 和 setter 来截取对对象成员的访问。它能帮助你有效的控制对对象成员的访问。
下面来看如何把一个简单的类改写成使用 get 和 set 。首先，我们从一个没有使用存取器的例子开始。

class Employee {
  fullName: string;
}

let employee = new Employee();
employee.fullName = 'Bob Smith';

if (employee.fullName) {
  console.log(employee.fullName); // Bob Smith
}

我们可以随意的设置 fullName，这是非常方便的，但是这也可能会带来麻烦。
下面这个版本里，我们先检查用户密码是否正确，然后在允许其修改员工信息。我们把 fullName 的直接访问改成了可以检查密码的 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';

if (employee.fullName) {
  alert(employee.fullName); // 弹出  Blob Smith
}

我们可以修改一下密码，来验证一下存取器是否工作的。当密码不对时，会提示我们没有权限去修改员工。
对于存取器有下面几点需要注意的：

首先，存取器要求你将编译器设置为输出 ECMAScript 5 或更高，不支持降级到 ECMAScript 3 。
其次，只有带 get 不带有 set 的存取器自动被推断为 readonly 。

静态属性

到目前为止，我们只讨论了类的实例成员，那些仅当类被实例化的时候才会被初始化的属性。我们可以创建类的静态成员，这些属性存在于类本身上面而不是类的实例上。在这个例子里，我们使用 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.x - Grid.origin.y;
    return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
  }

  constructor(public scale: number) {}
}

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

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

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

抽象类

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

abstract class Animal {
  abstract makeSound(): void;

  move(): void {
    console.log('roaming the search...');
  }
}

抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。抽象方法的语法于与接口方法类似。两者都是定义方法签名但不包含方法体。然而，抽象方法必须包含 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('Genaerating accounting reports...');
  }
}

let department: Department; // 允许创建一个对抽象类型的引用

department = new Department();
// error：Cannot create an instance of an abstract class.
// 错误：不能创建一个抽象类的实例

department = new AccountingDepartment();
// 允许对一个抽象子类进行实例化和赋值

department.printName();
// Department name Accounting and Auditing

department.printMeeting();
// The Accounting Department meets each Monday at 10am.'

department.generateReports();
// error： Property 'generateReports' does not exist on type 'Department'.
// generateReports 方法在声明的抽象类中不存在

高级技巧

构造函数

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

class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return 'Hello,' + this.greeting;
  }
}

let greeter: Greeter;
greeter = new Greeter('World');
console.log(greeter.greet()); // Hello,World

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

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

var Greeter = /** @class */ (function() {
  function Greeter(message) {
    this.greeting = message;
  }
  Greeter.prototype.greet = function() {
    return 'Hello,' + this.greeting;
  };
  return Greeter;
})();
var greeter;
greeter = new Greeter('World');
console.log(greeter.greet()); // Hello,World

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

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

class Greeter {
  static standardGreeting = 'Hello,there';
  greeting: string;

  greet() {
    if (this.greeting) {
      return 'Hello,' + this.greeting;
    } else {
      return Greeter.standardGreeting;
    }
  }
}

let greeter1: Greeter;
greeter1 = new Greeter();
console.log(greeter1.greet()); // Hello,there

let greeterMaker: typeof Greeter = Greeter;
greeterMaker.standardGreeting = 'Hey,there';

let greeter2: Greeter;
greeter2 = new Greeter();
console.log(greeter2.greet()); // Hey,there

这个例子里， greeter1 与之前看到的一样。我们实例化 Greeter 类，并使用这个对象。与我们之前看到的一样。

再之后，我们直接使用类。我们创建了一个叫 greeterMaker 的变量。这个变量保存了这个类或者说保存了类构造函数。然后我们使用 typeof Greeter，意思是取 Greeter 类的类型，而不是实例的类型。或者更确切的说，”告诉我 Greeter 标识符的类型”，也就是构造函数的类型。这个类型包含了类的所有静态成员和构造函数。之后，就和前面一样，我们在 greeterMaker 上使用 new，创建 Greeter 的实例。

把类当做接口使用

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

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

interface Point3d extends Point {
  z: number;
}

let point3d: Point3d = { x: 1, y: 2, z: 3 };
console.log(point3d); // { x: 1, y: 2, z: 3 }