TypeScript 类
介绍
传统的JavaScript程序使用函数和基于原型的继承来创建可重用的组件,但对于熟悉使用面向对象方式的程序员来讲就有些棘手,因为他们用的是基于类的继承并且对象是由类构建出来的。 从ECMAScript 2015,也就是ECMAScript 6开始,JavaScript程序员将能够使用基于类的面向对象的方式。 使用TypeScript,我们允许开发者现在就使用这些特性,并且编译后的JavaScript可以在所有主流浏览器和平台上运行,而不需要等到下个JavaScript版本。
类
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet():string {
return 'Hello, ' + this.greeting;
}
}
let greeter = new Greeter('world');
声明一个 Greeter
类,这个类有三个成员:
- 属性 `greeting`
- 构造函数 `contructor`
- 方法 `greet`
在这个类中引用任何一个类成员时都使用 this
, 它表示开发者访问的是类的成员。而在代码块的最后一行使用了 new
构造了一个 Greeter
类的一个实例 greeter
。这个实例 greeter
调用之前定义的构造函数,创建一个 Greeter
类型的新对象,执行构造函数并初始化它。
继承
TypeScript 中,可以使用 JavaScript 中常用的面向对象模式,基于类的程序设计中一种最基本的模式是允许使用继承来扩展现有的类。
class Animal {
move(distanceInMeters: number = 0) {
console.log(`动物移动了${ distanceInMeters }米。`)
}
}
class Dog extends Animal {
bark() {
console.log("汪!汪汪!")
}
}
const winteDog = new Dog;
dog.bark(); // 汪!汪汪!
dog.move(10); // 动物移动了10米。
dog.bark(); // 汪!汪汪!
上面的例子展示了基本的继承:类从基类中继承了属性和方法。Dog
是一个 派生类 ,它派生自 Animal
基类,通过 extends
关键字。
| 派生
:在旧的类的基础上衍生出新的类,
| 派生类
:利用基层机制,新的类可以从已有的类中派生,派生类同层被称作 子类 ,
| 基类
:那些勇于派生的类称为这些特别派生出的类的基类.新的数据类型不仅拥有新定义的成员,同时还拥有旧的成员,而那些已存在的用来派生新的类又称作父类。基类通常被称作 超类。
| 超类
:被继承的类一般称为“超类”,也有叫做父类。是继承中非常重要的概念,它和子类一起形象地描述了继承的层次关系。
class Animal {
name: string;
constructor(theName: string) {
this.name = theName;
}
move(distanceInMeters: number = 0) {
console.log(`${ this.name }移动了${ distanceInMeters }米。`)
}
}
class Snake extends Animal {
constructor(name: string) {
super(name);
}
move(distanceInMeters = 5) {
console.log('滑行中....');
super.move(distanceInMeters);
}
}
class Horse extends Animal {
constructor(name: string) {
super(name);
}
move(distanceInMeters = 45) {
console.log('飞速奔跑中....');
super.move(distanceInMeters);
}
}
let sam = new Snake('贪吃蛇');
let tom:Animal = new Horse('帕洛米诺马');
sam.move();
// 滑行中....
// 贪吃蛇移动了5米。
tom.move(34);
// 飞速奔跑中....
// 帕洛米诺马移动了34米。
上面的例子中,使用 extends
关键字创建了 Animal
的两个派生类(子类
): Hores
和 Snake
。、与之前那个例子不同的是,派生类包含了一个构造函数,它必须调用 super()
,它会强制执行基类的构造函数。而且,在构造函数里面访问 this
的属性前,开发者必须一定要调用 super()
,这个是 TypeScript 强制执行的一条中要规则。
例子中还演示了如何在子类里面重写父类的方法。 Snake
类和 Horse
类都创建了 move
方法,它们重写了从 Animal
继承来的 move
方法,使得 move
方法根据不同的类而具有不同的功能。注意,即使 tom
被声明为 Animal
类型,但是它的值是 Horse
,调用 tom.move(34)
时, 它会调用 Horse
里面重写的方法。
公有,私有与受保护的修饰符 public
private
protected
默认为public
在上面的类中,开发者可以自由的访问程序里定义的成员。如果开发者对其他语言中的类比较了解,就会注意到我们在之前的代码里并没有使用 public
来做修饰;例如,C# 要求必须明确地使用 public
指定成员是可见。在 TypeScript 里,成员默认都为 public
。
// 定义一个 动物 类
class Animal {
public name: string;
public constructor(theName: string) {
this.name = theName;
}
public move(distanceInMeters: number) {
console.log(`${ this.name }移动了${ distanceInMeters }米。`);
}
}
理解 private
当成员被标记成 private
时,它就不能在声明它的类的外部访问。
class Animal {
private name: string;
constructor(theName: string) {
this.name = theName;
}
}
new Animal('Cat'); // 错误:’name' 是私有的;
TypeScript 使用的是 结构性类型系统 。当比较两种不同类型时,并不在乎它们从何而来,如果所有成员的类型都是兼容的,开发者就可认为它们的类型是兼容的。
然而,当开发者比较带有 private
或者 protected
成员的类型的时候,情况就不同了。如果其中一个类型里包含一个 private
成员,name只有当另外一个类型中也存在这样一个 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('山羊');
let rhino = new Rhino();
let employee = new Employee('张三');
animal = rhino;
animal = employee; // 错误:Animal 于 Employee 不兼容;
这个例子中有 Animal
和 Rhino
两个类, Rhino
是 Animal
的子类。还有一个 Employee
类,其类型看上去与 Animal
是相同的。开发者创建了几个这些类的实例,并且互相赋值。因为 Animal
与 Rhino
共享了来自 Animal
里面的私有成员定义 private name: string
,因此他们是兼容的。然而 Employee
却不是这样,当把 Employee
赋值给 Animal
的时候,得到一个错误,说明它们的类型不兼容。尽管 Employee
里面也有一个私有成员 name
,但它明显不是 Animal
里面定义的那个。
理解 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():string {
return `你好,我的名字是${ this.name },现在工作在${ this.department }。`
}
}
let SnowRock = new Employee('SnowRock','Eighteen');
console.log(SnowRock.getElevatorPitch());
console.log(SnowRock.name); // 错误:‘name' 是一个私有属性
注意,开发者不能在 Person
类外使用 name
,但是开发者仍然可以通过 Employee
类的实例方法访问,因为 Employee
是由 Person
派生而来的。
构造函数也可以被标记成 protected
。这意味着这个类不能包含在包含它的类外被实例化,但是能被继承。
class Person {
protected name: string;
protected constructor(thiName: string) {
this.name = name;
}
}
// Employee 能够继承 Person
class Employee extends Person {
private department: string;
constructor(name: string, department: string) {
super(name);
this.department = department;
}
public getElevatorPitch() {
return `你好,我的名字是${ this.name },现在工作在${ this.department }。`
}
}
let SnowRock = new Employee('SnowRock','Eighteen');
let SnowLean = new Person('SnowLean'); // 错误:'Person' 的构造函数是被保护的
readonly
修饰符
开发者可以使用 readonly
关键字将属性设置为只读的,只读属性必须在声明时或构造函数里被初始化。
// 定义一个章鱼类
class Octopus {
readonly name: string;
readonly numberOfLegs: number = 8;
constructor(theName: string){
this.name = theName;
}
}
let dad = new Octopus('拥有8条强壮腿的男人');
dad.name = "穿三套西服的男人"; // 错误! name 是只读的.
参数属性
从上面的例子中可以看得出来,在 Octopus
类中定义了两个只读参数 name
和 numberOfLegs
两个参数,而在构造函数中将 theName
参数赋值给 name
,这种情况比较常见。而 参数属性 可以方便地让开发者在一个地方定义并且初始化一个成员。
// 使用了参数属性后的章鱼类
class Octopus {
readonly numberOfLegs: number = 8 ;
constructor(readonly name: string) {
}
}
在构造函数里面使用 readonly name: string
参数来创建和初始化 name
成员。TypeScript 将声明和赋值合并至一处。
参数属性通过给构造函数参数前面添加一个访问限定符来声明。使用 private
限定一个参数属性会声明并初始化一个私有成员;对于 public
和 protected
来说也是一样的。
存取器 getters / setters
TypeScript 支持通过 getters / setters 来截取对对象成员的访问。可以有效的控制对对象成员的访问。
// 首先先写一个没有使用过存取器的例子
class Employee {
fullName: string;
}
let employee = new Employee();
employee.fullName = 'Bob Smith';
if (employee.fullName) {
console.log(employee.fullName);
}
// 在上面的方法中可以随意设置 employee.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;
return
}
console.log('错误:未经授权无法修改员工信息')
}
}
let employee = new Employee();
employee.fullName = 'Bob Smith';
if (employee.fullName) {
console.log(employee.fullName);
}
对于存取器有一下几点需要注意的:
- 首先,存取器要求你将编译器设置为输出 Es5 或者更高。不支持降级到 Es3;
- 其次,只带有
get
不带有set
的存取器自动被推断为readonly
,这在代码生成.d.ts
文件时是有帮助的。因为你用这个属性的用户会看不到不允许能够改变它的值。
静态属性 static
到目前为止,开发者只讨论了类的实例成员,那些仅当类被实例化的时候才会被初始化的属性。 开发者也可以创建类的静态成员,这些属性存在于类本身上面而不是类的实例上。 在这个例子里,开发者使用 static
定义 origin
,因为它是所有网格都会用到的属性。 每个实例想要访问这个属性的时候,都要在 origin
前面加上类名。 如同在实例属性上使用 this.
前缀来访问属性一样,这里我们使用 Grid.
来访问静态属性。
// 首先定义一个 Grid 类
class Grid {
// 使用 static 定义一个 origin 属性
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 修饰的类是抽象类。在C++中,含有纯虚拟函数的类称为抽象类,它不能生成对象;在java中,含有抽象方法的类称为抽象类,同样不能生成对象。抽象类是不完整的,它只能用作基类。在面向对象方法中,抽象类主要用来进行类型隐藏和充当全局变量的角色。在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类。
抽象类做为其它派生类的基类使用。 它们一般不会直接被实例化。 不同于接口,抽象类可以包含成员的实现细节。abstract
关键字是用于定义抽象类和在抽象类内部定义抽象方法。
// 定义一个抽象类 Animal
abstract class Animal {
abstract makeSound(): void;
move(): void {
console.log('roaming the earch...');
}
}
抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。 抽象方法的语法与接口方法相似。 两者都是定义方法签名但不包含方法体。 然而,抽象方法必须包含 abstract
关键字并且可以包含访问修饰符。
// 定义一个抽象类 Department
abstract class Department {
// 在构造函数中使用 public 定义一个参数属性 name ,name 的类型是 string
constructor(public name: string) {
}
// 定义一个实例方法 printName 返回值为 void 类型
printName(): void {
// 输出 公司名称
console.log('公司名称: ' + this.name);
}
// 定义一个抽象方法 printMeeting 返回值为 void 类型
abstract printMeeting(): void; // 必须在派生类中实现
}
// 定义一个基于抽象类 Department 的类 AccountingDepartment
class AccountingDepartment extends Department {
// 构造函数
constructor() {
super('会计和审计'); // 在派生类的构造函数中必须调用 super()
}
// 定义方法 printMeeting
printMeeting(): void {
console.log('会计部门每周一上午10点开会。');
}
// 定义方法 generateReports 返回值为 void 类型
generateReports(): void {
console.log('生成会计报告……');
}
}
let department: Department; // 允许创建一个对抽象类型的引用
department = new Department(); // 错误: 不能创建一个抽象类的实例
department = new AccountingDepartment(); // 允许对一个抽象子类进行实例化和赋值
department.printName(); // 输出:公司名称:会计和审计
department.printMeeting(); // 输出:会计部门每周一上午10点开会。
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());
这里,我们写了 let greeter: Greeter
,意思是 Greeter
类的实例的类型是 Greeter
。 这对于用过其它面向对象语言的程序员来讲已经是老习惯了。
我们也创建了一个叫做 构造函数的值。 这个函数会在我们使用 new
创建类实例的时候被调用。 下面我们来看看,上面的代码被编译成JavaScript后是什么样子的:
let Greeter = (function () {
function Greeter(message) {
this.greeting = message;
}
Greeter.prototype.greet = function () {
return "Hello, " + this.greeting;
};
return Greeter;
})();
let greeter;
greeter = new Greeter("world");
console.log(greeter.greet());
上面的代码里, let 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());
let greeterMaker: typeof Greeter = Greeter;
greeterMaker.standardGreeting = "Hey there!";
let greeter2: Greeter = new greeterMaker();
console.log(greeter2.greet());
这个例子里, 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};