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

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

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

一、类（class）

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

 class User {
     name: string;
     constructor(_name: string) {
         this.name = _name;
     }

     sayHello(): string {
         return `Hello,${this.name}!`;
     }
 }

 let user = new User('John Reese');
 user.sayHello();

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

1. 类成员的访问级别

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

 class User {
     name: string;
     private sex: string;
     protected age: number;
     constructor(_name: string) {
         this.name = _name;
     }

     sayHello(): string {
         return `Hello,${this.name}!`;
     }
 }

 let user = new User('John Reese');
 user.name = 'Root';                 // 公有属性，可以赋值
 user.sex = 'female';                // 私有属性，无法赋值
 user.age = 28;                      // 受保护属性，无法赋值
 user.sayHello();

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

2. 属性的get和set访问器

 class User {
     private _name: string;

     get name(): string {
         return this._name;
     }

     set name(newName: string) {
         this._name = newName;
     }

     constructor(_name: string) {
         this.name = _name;
     }

     sayHello(): string {
         return `Hello,${this._name}!`;
     }
 }

 let user = new User('John Reese');
 user.name = 'Root';
 user.sayHello();

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

 var User = (function () {
     function User(_name) {
         this.name = _name;
     }
     Object.defineProperty(User.prototype, "name", {
         get: function () {
             return this._name;
         },
         set: function (newName) {
             this._name = newName;
         },
         enumerable: true,
         configurable: true
     });
     User.prototype.sayHello = function () {
         return "Hello," + this._name + "! " + this._age;
     };
     return User;
 }());
 var user = new User('John Reese');
 user.name = 'Root';
 user.sayHello();

3. 静态属性

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

 class User {
     static sex_type = ['male', 'female'];       // 静态属性
     name: string;
     sex: string;

     constructor(_name: string) {
         this.name = _name;
     }

     sayHello(): string {
         return `Hello,${this.name}!`;
     }
 }

 let user = new User('John Reese');
 user.name = 'Root';
 user.sex = User.sex_type[1];
 user.sayHello();

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

4. 类的继承

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

 // 基类
 class Animal {
     name: string;

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

     eat() {
         console.log(`${this.name} 吃食物。`);
     }
 }

 // 子类继承基类
 class Dog extends Animal {
     constructor(theName: string) {
         super(theName);
     }

     eat() {
         super.eat();
         console.log('并且吃的是狗粮。');
     }
 }

 class People extends Animal {
     constructor(theName: string) {
         super(theName);
     }

     // 子类重写基类方法
     eat() {
         console.log(`${this.name} 拒绝吃狗粮。`);
     }
 }

 let animal = new Animal('动物');
 animal.eat();

 let dog: Animal;
 dog = new Dog('狗');
 dog.eat();

 let people: Animal;
 people = new People('人类');
 people.eat();

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

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

 var __extends = (this && this.__extends) || function (d, b) {
     for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
     function __() { this.constructor = d; }
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 };
 // 基类
 var Animal = (function () {
     function Animal(theName) {
         this.name = theName;
     }
     Animal.prototype.eat = function () {
         console.log(this.name + " \u5403\u98DF\u7269\u3002");
     };
     return Animal;
 }());
 // 子类继承基类
 var Dog = (function (_super) {
     __extends(Dog, _super);
     function Dog(theName) {
         _super.call(this, theName);
     }
     Dog.prototype.eat = function () {
         _super.prototype.eat.call(this);
         console.log('并且吃的是狗粮。');
     };
     return Dog;
 }(Animal));
 var People = (function (_super) {
     __extends(People, _super);
     function People(theName) {
         _super.call(this, theName);
     }
     // 子类重写基类方法
     People.prototype.eat = function () {
         console.log(this.name + " \u62D2\u7EDD\u5403\u72D7\u7CAE\u3002");
     };
     return People;
 }(Animal));
 var animal = new Animal('动物');
 animal.eat();
 var dog;
 dog = new Dog('狗');
 dog.eat();
 var people;
 people = new People('人类');
 people.eat();

编译之后的JavaScript源码

5. 抽象类

将上面的例子稍微修改下

 // 抽象类
 abstract class Animal {
     name: string;

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

     abstract eat();
 }

 // 子类继承抽象类
 class Dog extends Animal {
     constructor(theName: string) {
         super(theName);
     }

     eat() {
         console.log(`${this.name} 吃狗粮。`);
     }
 }

 let animal = new Animal('动物');      // 抽象类无法实例化
 animal.eat();

 let dog: Animal;
 dog = new Dog('狗');
 dog.eat();

通过abstract关键字声明抽象类和抽象方法，子类继承抽象类后，需要实现抽象方法。同样的，抽象类不能被实例化。

二、接口

下面是一个简单的接口声明

 interface Animal {
     name: string;
 }

在JavaScript里没有对应的类型与之对应，所以编译之后不会生成任何JavaScript代码。

1. 作为参数类型

接口类型可以作为方法的参数类型，效果等同于直接指定Json对象的类型。

 interface Animal {
     name: string;
 }

 let printName = function(param: Animal) {
     console.log(`Name is ${param.name}`);
 }

 printName({name: 'Dog'});

同样，接口成员也可以是缺省的

 interface Animal {
     name: string;
     age?: number;
 }

 let printName = function (param: Animal) {
     if (param.age) {
         console.log(`Name is ${param.name}, and age is ${param.age}`);
     } else {
         console.log(`Name is ${param.name}`);
     }
 }

 printName({ name: 'Dog' });
 printName({ name: 'Dog', age: 5 });

但是在某些情况下，调用方法时，参数赋值可能会有多个，接口在作为参数类型时也支持拥有多个成员的情况。

 interface Animal {
     name: string;
     age?: number;
     [propName: string]: any;        // 其他成员
 }

 let printName = function (param: Animal) {
     if (param.age) {
         console.log(`Name is ${param.name}, and age is ${param.age}`);
     } else {
         console.log(`Name is ${param.name}`);
     }
 }

 printName({ name: 'Dog' });
 printName({ name: 'Dog', age: 5 });
 printName({ name: 'Dog', age: 5, character: '粘人' });    // 多于明确定义的属性个数

2. 作为其他类型

接口也可以定义方法的类型，和数组类型

 interface FuncType {
     (x: string, y: string): string;         // 声明方法成员
 }

 let func1: FuncType;
 func1 = function (prop1: string, prop2: string): string {       // 方法参数名称不需要与接口成员的参数名称保持一致
     return prop1 + ' ' + prop2;
 }

 interface ArrayType {
     [index: number]: string;                // 声明数组成员
 }

 let arr: ArrayType;
 arr = ['Dog', 'Cat'];

3. 接口的继承与实现

同强类型语言一样，TypeScript的接口支持继承与实现。

 interface Animal {
     name: string;
     eat(): void;
 }

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

     eat() {
         console.log(`${this.name} 吃狗粮。`)
     }
 }

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

     eat() {
         console.log(`${this.name} 吃猫粮。`)
     }
 }

 let dog: Animal;
 dog = new Dog('狗狗');
 dog.eat();

 let cat: Animal;
 cat = new Cat('喵星人');
 cat.eat();

类通过implements关键字继承接口，并实现接口成员。

同时，接口也可以多重继承。

 interface Animal {
     name: string;
     eat(): void;
 }

 interface Person extends Animal {                   // 继承自Animal接口
     use(): void;
 }

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

     eat() {
         console.log(`${this.name} 拒绝吃狗粮。`)
     }

     use() {
         console.log(`${this.name} 会使用工具。`)
     }
 }

 let man: Person;
 man = new People('男人');
 man.eat();
 man.use();

4. 类型转换

在TypeScript里，接口可以对符合任一成员类型的对象进行转换，转换之后的对象自动继承了接口的其他成员。

 interface Animal {
     name: string;
     age: number;
     eat(): void;
 }

 let thing = { name: '桌子' };
 let otherThing = <Animal>thing;             // 类型转换
 otherThing.age = 5;
 otherThing.eat = function () {
     console.log(`${this.name} 不知道吃什么。`)
 };

上面的例子里，声明了拥有name属性的json对象，通过<>将json对象转换成了Animal类型的对象。转换后的对象则拥有了另外的age属性和eat方法。

5. 接口继承类

在TypeScript里，接口可以继承类，这样接口就具有了类里的所有成员，同时这个接口只能引用这个类或者它的子类的实例。

 class People {
     name: string;
     private age: number;
     constructor(theName: string) {
         this.name = theName;
     }

     eat() {
         console.log(`${this.name} 拒绝吃狗粮。`);
     }

     use() {
         console.log(`${this.name} 会使用工具。`)
     }
 }

 interface Animal extends People {               // 接口

 }

 class Man extends People {                      // 子类

 }

 class Cat {                                     // 拥有同样结构的另外一个类
     name: string;
     private age: number;
     constructor(theName: string) {
         this.name = theName;
     }

     eat() {
         // 具体实现
     }

     use() {
         // 具体实现
     }
 }

 let cat: Animal;
 cat = new Cat('喵星人');                       // Cat类不是People的子类，无法被Animal引用

 let man: Animal;
 man = new Man('男人');
 man.eat();

当继承链过深，代码需要在某一个子类的类型下执行时，这种方法比较有效。