ts中的类

类

ES6中定义类

之前我们了解过ES6的类，可以这样写：

class Point{
    x;
    y;
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    toValue(){
        return this.x+ this.y;
    }
}
const p = new Point(1,2);
console.log(p.toValue());//输出 3

TypeScript中定义类

class Point{
    x:number;
    y:number;
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    toValue():number{
        return this.x+ this.y;
    }
}
const p:Point = new Point(1,2);
console.log(p.toValue());

一眼看下来， ES6中定义类和TypeScript中定义类，好像差不多：x，y是属性，constructor()是构造函数，toValue()是方法。
唯一的区别是，TypeScript中的类多了诸如:number，:Point的类型检查。
对吗？
把ES6中的类的x;y;删掉，依然OK；
把TypeScript中类的x:number;y:number;删掉，报错Property 'x' does not exist on type 'Point'。
所以，看起来差不多，实则差很多。

java中的类

再来看看java中的类。
x，y是属性；与类名同名的函数Point()是构造函数，toValue()是方法。

public class Point {
	int x;
	int y;
	Point(int x, int y){
		this.x = x;
		this.y = y;
	}
	int toValue() {
		return this.x+this.y;
	}
}

public class Test {
	public static void main(String[] args) {
		Point p = new Point(1,2);
		int res = p.toValue();
		System.out.println(res);
	}
}

所以，TypeScript中的类和java中的类确实有些像，不过很明显的一个区别是：TypeScript中用的是形如:number的类型注解来约束变量，java则使用的是类型声明，如int。
接下来，会继续了解TypeScript的类，也会比对java的类，毕竟都是面向对象。

类的继承

TypeScript中类的继承

//index.ts
class Animal{
    food:string;
    constructor(f:string){
        this.food = f;
    }
    makeNoise(){
    }
}

class Lion extends Animal{
    makeNoise(){
        console.log("roar");
    }
}
var lion:Lion = new Lion("meat");
console.log(lion.food);
lion.makeNoise();

基类Animal拥有food属性和makeNoise方法，派生类Lion继承了基类Animal，Lion因此拥有Animal的所有属性和方法，并覆写了makeNoise方法。

//index.ts
class Animal{
    food:string;
    constructor(f:string){
        this.food = f;
    }
    makeNoise(){
    }
}

class Lion extends Animal{
    size:string;
    constructor(f:string,s:string){
        super(f);
        this.size = s;
    }
    makeNoise(){
        console.log("roar");
    }
}

var lion:Lion = new Lion("meat","medium");
console.log(lion.food,lion.size);
lion.makeNoise();

在这里，派生类Lion包含了构造函数，要注意两点

• 必须通过调用super()执行基类的构造函数，否则TypeScript编译器会报错Constructors for derived classes must contain a 'super' call。

• 调用Super()必须在访问this之前，否则TypeScript编译器会报错'super' must be called before accessing 'this' in the constructor of a derived class

tsc index.ts后，我们再来分析分析编译后的代码逻辑。

//javascript实现的继承
function Animal(f){
    this.food = f;
}
Animal.prototype = {
    constructor:Animal,
    makeNoise:function(){

    }
}

function Lion(f,z){
    Animal.call(this,f);
    // this.size = z;
}
inherit(Animal.prototype,Lion);
Lion.prototype.makeNoise = function(){
    console.log("roar");
}
function inherit(proto,derived){
    function F(){
        this.constructor = derived;
    }
    F.prototype = proto;
    derived.prototype = new F();
}

var lion = new Lion("meat","medium");
console.log(lion.food/*,lion.size*/);
lion.makeNoise();

因此，上例的原型链如下：