TypeScript 基础（二）

TypeScript 类、继承与接口

类

1. 类的介绍

   原生JavaScript使用函数和基于原型的继承来创建可重用的组件，真正的面向对象编程中的类到ES6才出现，而TypeScript直接允许程序员们使用基于类的面向对象编程，并且编译后的JavaScript可以在所有主流浏览器和平台上运行。

2. 类的基本语法

   下面举一个使用类的例子：

   class Greeter {
       greeting: string;
       constructor(message: string) {
           this.greeting = message;
       }
       greet() {
           return "Hello, " + this.greeting;
       }
   }
   
   let greeter = new Greeter("world");
   

   这是一个简单的打印语句功能的类，语法与ES6极其相似，对于已经熟悉面向对象编程的人来说，上手很容易。

类的继承

与常用的面向对象模式相似，TypeScript也允许使用继承来扩展现有的类，一个简单的例子：

class Animal {
    move(distanceInMeters: number = 0) {
        // TypeScript中${...}表示字符串中加入变量
        console.log(`Animal moved ${distanceInMeters}m.`); 
    }
}

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

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

一个稍微复杂的例子：

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("shuashua");
        super.move(distanceInMeters);
    }
}

class Horse extends Animal {
    constructor(name: string) { 
        super(name); 
    }
    move(distanceInMeters = 45) {
        console.log("derder");
        super.move(distanceInMeters);
    }
}

let sam = new Snake("蛇蛇");
let tom: Animal = new Horse("马马");

sam.move(); 
// shuashua...
// 蛇蛇 moved 5m.
tom.move(34);
// derder...
// 马马 moved 34m.

这个例子中，使用extends关键字创建了Animal的两个子类，但是两个子类中都包含了构造函数constructor，所以必须调用super()来执行基类的构造函数。而且，在构造函数里访问this属性之前，一定要调用super()。这是TypeScript强制执行的一条重要规则！

public(公有)、private(私有) 和protected(受保护)修饰符。

1. 默认为公有public

   在上面的例子里，程序里定义的成员仿佛可以在外界自由访问，但是我们并没有定义public，因为在TypeScript中，成员都默认为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.`);
       }
   }
   

2. 私有private

   当成员被标记为private时，表示它是私有的，只能自己调用，不能被外界访问到。

   private私有方法允许继承，不暴露在外面，实例化对象不可调用

   比如：

   class Animal {
       private name: string;
       constructor(theName: string) { this.name = theName; }
   }
   
   new Animal("Cat").name; // 错误: 'name' 是私有的.
   

3. 受保护protected

   protected与private类似，但是protected成员在继承它的所有子类中也都可以访问。

接口

在TypeScript中，核心原则之一是对值所具有的结构进行类型检查。在TypeScript里，接口的作用就是为这些类型命名，设置类的接口，可以有效地约束类必须使用设置的接口的所有方法和属性

接口内容只能是public

先来一个简单的案例对比一下接口如何工作：

原始代码如下：

function printLabel(labelledObj: { label: string }) {
  console.log(labelledObj.label);
}

let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);

用接口重写：必须包含一个label属性且类型为string：

interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

真正使用的过程中的一个简单的接口示例：

interface IDivMove{
    speed:number;
    createElement():HTMLElement;
    update():void;
}
interface IEventDispatch{
    dispatchs():void;
    addEvent(type:string,callBack:Function):void;
}

class HTMLElem implements IDivMove,IEventDispatch{
    public speed:number=1;
    public createElement():HTMLDivElement{
        let div = document.createElement("div");
        return div;
    }
    public update():void{
        
    }
    public dispatchs():void{
        
    }
    public addEvent():void{
        
    }
}
class HTMLElems implements IDivMove{
    public speed:number=1;
    public createElement():HTMLSpanElement{
        let span = document.createElement("span");
        return span;
    }
    public update():void{
        
    }
}

…

本篇文章介绍了TypeScript入门的一些皮毛，

有关类、继承和接口的知识点还有很多，详情可以参阅 官方文档