TypeScript学习笔记（四） - 类和接口

本篇将介绍TypeScript里的类和接口。

与其他强类型语言类似，TypeScript遵循ECMAScript 2015标准，支持class类型，同时也增加支持interface类型。

一、类（class）

下面是一个类的基本定义方式：

 1 class User {
 2     name: string;
 3     constructor(_name: string) {
 4         this.name = _name;
 5     }
 6 
 7     sayHello(): string {
 8         return `Hello,${this.name}!`;
 9     }
10 }
11 
12 let user = new User('John Reese');
13 user.sayHello();

在上面的例子里，定义了一个类User，这个类拥有一个属性、一个构造函数和一个实例方法sayHello。通过new的方式，可以用这个类实例化一个实例对象，并可以调用实例方法。这与大多数静态语言的声明方式一致。

1. 类成员的访问级别

与强类型语言类似，TypeScript的类成员可以显式声明访问级别：public、protected、private

 1 class User {
 2     name: string;
 3     private sex: string;
 4     protected age: number;
 5     constructor(_name: string) {
 6         this.name = _name;
 7     }
 8 
 9     sayHello(): string {
10         return `Hello,${this.name}!`;
11     }
12 }
13 
14 let user = new User('John Reese');
15 user.name = 'Root';                 // 公有属性，可以赋值
16 user.sex = 'female';                // 私有属性，无法赋值
17 user.age = 28;                      // 受保护属性，无法赋值
18 user.sayHello();

在TypeScript里，如果不显示指定访问级别，则默认为public。

2. 属性的get和set访问器

 1 class User {
 2     private _name: string;
 3     
 4     get name(): string {
 5         return this._name;
 6     }
 7 
 8     set name(newName: string) {
 9         this._name = newName;
10     }
11 
12     constructor(_name: string) {
13         this.name = _name;
14     }
15 
16     sayHello(): string {
17         return `Hello,${this._name}!`;
18     }
19 }
20 
21 let user = new User('John Reese');
22 user.name = 'Root';                 
23 user.sayHello();

通过get和set关键字声明属性访问器，通过属性访问器可以精确控制属性的赋值和获取值。下面是经过编译后生成的JavaScript代码

 1 var User = (function () {
 2     function User(_name) {
 3         this.name = _name;
 4     }
 5     Object.defineProperty(User.prototype, "name", {
 6         get: function () {
 7             return this._name;
 8         },
 9         set: function (newName) {
10             this._name = newName;
11         },
12         enumerable: true,
13         configurable: true
14     });
15     User.prototype.sayHello = function () {
16         return "Hello," + this._name + "! " + this._age;
17     };
18     return User;
19 }());
20 var user = new User('John Reese');
21 user.name = 'Root';
22 user.sayHello();

3. 静态属性

静态属性即是通过类型而不是实例就可以访问的属性

 1 class User {
 2     static sex_type = ['male', 'female'];       // 静态属性
 3     name: string;
 4     sex: string;
 5 
 6     constructor(_name: string) {
 7         this.name = _name;
 8     }
 9 
10     sayHello(): string {
11         return `Hello,${this.name}!`;
12     }
13 }
14 
15 let user = new User('John Reese');
16 user.name = 'Root';
17 user.sex = User.sex_type[1];
18 user.sayHello();

通过static关键字可以声明类型的静态属性。

4. 类的继承

同强类型语言一样，TypeScript也支持类的继承

 1 // 基类
 2 class Animal {
 3     name: string;
 4 
 5     constructor(theName: string) {
 6         this.name = theName;
 7     }
 8 
 9     eat() {
10         console.log(`${this.name} 吃食物。`);
11     }
12 }
13 
14 // 子类继承基类
15 class Dog extends Animal {
16     constructor(theName: string) {
17         super(theName);
18     }
19 
20     eat() {
21         super.eat();
22         console.log('并且吃的是狗粮。');
23     }
24 }
25 
26 class People extends Animal {
27     constructor(theName: string) {
28         super(theName);
29     }
30 
31     // 子类重写基类方法
32     eat() {
33         console.log(`${this.name} 拒绝吃狗粮。`);
34     }
35 }
36 
37 let animal = new Animal('动物');
38 animal.eat();
39 
40 let dog: Animal;
41 dog = new Dog('狗');
42 dog.eat();
43 
44 let people: Animal;
45 people = new People('人类');
46 people.eat();

从上面的例子可以看到，子类通过extends关键字可以继承其他类，通过super方法调用基类对应的方法，也可以直接重写基类的方法。

下面是编译之后生成JavaScript源码，可以比较看看

 1 var __extends = (this && this.__extends) || function (d, b) {
 2     for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
 3     function __() { this.constructor = d; }
 4     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 5 };
 6 // 基类
 7 var Animal = (function () {
 8     function Animal(theName) {
 9         this.name = theName;
10     }
11     Animal.prototype.eat = function () {
12         console.log(this.name + " \u5403\u98DF\u7269\u3002");
13     };
14     return Animal;
15 }());
16 // 子类继承基类
17 var Dog = (function (_super) {
18     __extends(Dog, _super);
19     function Dog(theName) {
20         _super.call(this, theName);
21     }
22     Dog.prototype.eat = function () {
23         _super.prototype.eat.call(this);
24         console.log('并且吃的是狗粮。');
25     };
26     return Dog;
27 }(Animal));
28 var People = (function (_super) {
29     __extends(People, _super);
30     function People(theName) {
31         _super.call(this, theName);
32     }
33     // 子类重写基类方法
34     People.prototype.eat = function () {
35         console.log(this.name + " \u62D2\u7EDD\u5403\u72D7\u7CAE\u3002");
36     };
37     return People;
38 }(Animal));
39 var animal = new Animal('动物');
40 animal.eat();
41 var dog;
42 dog = new Dog('狗');
43 dog.eat();
44 var people;
45 people = new People('人类');
46 people.eat();

编译之后的JavaScript源码