TypeScript 类

TypeScript 教程

><font style="color:green">在TypeScript 和 JavaScript中，一切皆对象。</font>
><br>记住并理解这句话

TypeScript 是面向对象的 JavaScript。

类描述了所创建的对象共同的属性和方法。

TypeScript 支持面向对象的所有特性，比如 类、接口等。

TypeScript 类定义方式如下：

class class_name { 
		// 类作用域
	}

定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块（类的数据成员）：

- 字段 − 字段是类里面声明的变量。字段表示对象的有关数据。

- 构造函数 − 类实例化时调用，可以为类的对象分配内存。

- 方法 − 方法为对象要执行的操作。

##### 实例

创建一个 Person 类：

class Person {
	}

编译以上代码，得到以下 JavaScript 代码：

var Person = /** @class */ (function () {
		function Person() {
		}
		return Person;
	}());

>刚开始做H5游戏，接触JavaScript的时候就觉得很迷茫，JavaScript没有类的概念，那么TypeScript到底是怎么模拟出类？
学习TypeScript基础之后，才明白，JavaScript中一切皆对象。
是的，function也是一个对象。

将上面的TypeScript里面，定义的 Person 类，打印出来看。

```javascript
Person()

length: 0

name: "Person"

prototype: {…}

constructor: function Person()
<prototype>: Object { … }

<prototype>: function ()
```

可以看到，TypeScript代码里定义的 Person 类，其实就是function。

------------

#### 类的定义以及实例化

游戏中都有英雄、怪物的区分，怪物其实就是一个类。怪物会攻击人，攻击 就是怪物的类方法。

下面的代码创建了怪物类。

class Monster {

mName: string;

constructor(varName: string) { 
			this.mName=varName
		}

Attack(): void { 
			console.log("Monster "+this.mName+" Attack")
		}
	}

var tmpMonster: Monster = new Monster("哥布林")
	tmpMonster.Attack()
	
输出结果

Monster 哥布林 Attack

#### 类的继承

游戏中的怪物，可以细分为小怪和Boss。怪物就是基类，小怪和BOSS是继承自怪物，称为子类。

下面的代码，创建了BOSS 菠萝丁之王。

```javascript
class Monster {

mType: string;
    mName: string;
    
    constructor(varName: string) { 
        this.mType=""
        this.mName=varName
    }

Attack(): void { 
        console.log(this.mType+" "+this.mName+" Attack")
    }
}

class Boss extends Monster{
    Attack(): void{
        super.mType="BOSS"
        super.Attack()
    }
}

var tmpBoss: Boss = new Boss("菠萝丁之王")
tmpBoss.Attack()
```

输出结果

BOSS 菠萝丁之王 Attack

------------

#### static 关键字

static 关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。

class StaticMem {  
	   static num:number;

static disp():void { 
		  console.log("num 值为 "+ StaticMem.num) 
	   } 
	}

StaticMem.num = 12     // 初始化静态变量
	StaticMem.disp()       // 调用静态方法

编译以上代码，得到以下 JavaScript 代码：

输出结果为：

num 值为 12

------------

#### instanceof 运算符

**instanceof** 运算符用于判断对象是否是指定的类型，如果是返回 true，否则返回 false。

下面的代码，判断 菠萝丁之王是不是Monster，是不是BOSS.

```javascript
class Monster {

mName: string;
    
    constructor(varName: string) { 
  
        this.mName=varName
    }

}

class Boss extends Monster{

}

var tmpBoss: Boss = new Boss("菠萝丁之王")

console.log(tmpBoss instanceof Monster)
console.log(tmpBoss instanceof Boss)
```

输出结果

true
	true

------------

#### 访问控制修饰符

TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。

- public（默认） : 公有，可以在任何地方被访问。

- protected : 受保护，可以被其自身以及其子类和父类访问。

- private : 私有，只能被其定义所在的类访问。

以下实例定义了两个变量 str1 和 str2，str1 为 public，str2 为 private，实例化后可以访问 str1，如果要访问 str2 则会编译错误。

class Encapsulate { 
	   str1:string = "hello" 
	   private str2:string = "world" 
	}

var obj = new Encapsulate() 
	console.log(obj.str1)     // 可访问 
	console.log(obj.str2)   // 编译错误， str2 是私有的

------------

#### 类和接口

类可以实现接口，使用关键字 implements，并将 interest 字段作为类的属性使用。

以下实例红 AgriLoan 类实现了 ILoan 接口：

interface ILoan { 
	   interest:number 
	}

class AgriLoan implements ILoan { 
	   interest:number 
	   rebate:number

constructor(interest:number,rebate:number) { 
		  this.interest = interest 
		  this.rebate = rebate 
	   } 
	}

var obj = new AgriLoan(10,1) 
	console.log("利润为 : "+obj.interest+"，抽成为 : "+obj.rebate )

编译以上代码，得到以下 JavaScript 代码：

var AgriLoan = /** @class */ (function () {
		function AgriLoan(interest, rebate) {
			this.interest = interest;
			this.rebate = rebate;
		}
		return AgriLoan;
	}());
	var obj = new AgriLoan(10, 1);
	console.log("利润为 : " + obj.interest + "，抽成为 : " + obj.rebate);

输出结果为：

利润为 : 10，抽成为 : 1