TypeScript系列（二）

本篇围绕这类的继承，泛型，接口的知识来叙述TypeScript，同时也解释了其实与java或kotlin等语言很相似的原因。

1.类的继承（就跟js中的原型是类似的）

什么是继承：可以去百度一下java中的继承的概念，就不做过多的描述了，偷个懒

实例：先定义一个父类Fuit水果类，再定义两个子类，且在父类Fuit中定义了一个eat方法

/**
 * 类  继承，访问控制符
 */
//父类：水果
class Fuit {
    //定义成员变量 只有子类才能访问此属性
    protected name: string;

    //构造方法
    constructor(name) {
        this.name = name;
    }

    //默认是公共方法public
    eat() {
        console.log(`我正在吃:${this.name}`)
    }
}

//苹果：水果的子类
class Apple extends Fuit {

    //定义私有属性的成员变量 外部是不能够访问此变量的（只是一个演示）
    private age: number;
    
    //在继承父类的构造方法上 自增一个属性，更改构造
    constructor(name, age) {
        super(name); //调用父类的构造
        this.age = age;
    }

    //打印种龄方法
    public displayAge() {
        console.log("我的种龄是:" + this.age)
    }
}

//香蕉：水果的子类
class Banana extends Fuit {

    private age: number;

    //在继承父类的构造方法上 自增一个属性，更改构造（只是一个演示）
    constructor(name, age) {
        super(name);
        this.age = age;
    }

    //打印种龄方法
    public displayAge() {
        console.log("我的种龄是:" + this.age);
        //调用自身的私有方法 因为外部是不能够通过实例化Banana调用displayName()这个私有方法的
        this.displayName();
    }

    //打印名称方法
    private displayName() {
        console.log("我的名称是:" + this.name)
    }

    public getName() {
        return this.name;
    }
}
//实例化Apple
let apple = new Apple("苹果", 2);
//因为Apple继承了Fuit，而且Fuit类中eat()方法不是私有的，所以Apple类可以调用其父类中不是私有的eat()方法
apple.eat();//打印结果："我正在吃:苹果"
apple.displayAge();//调用Apple类自身的displayAge()方法

//实例化Banana
let banana = new Banana("香蕉", 3);
banana.eat();
banana.displayAge();

2.泛型

什么是泛型：可以去百度一下java中的泛型的概念，就不做过多的描述了，偷个懒

//1.定义Array数组，数组中存放Banana香蕉这个类
let bananaArr: Array<Banana> = [new Banana("菠萝香蕉", 2), new Banana("苹果香蕉", 3), new Banana("篱笆香蕉", 5)];
bananaArr.forEach(value => {
    console.log(value.getName()); //循环打印出香蕉中名称
});

//2.利用泛型建立一个公共的数据模型类
class CommentBean<K, V> {
    private key: K;
    private value: V;

    setValue(key: K, value: V) {
        this.key = key;
        this.value = value;
    }

    getValue():V {
        return this.value;
    }
}

let commentBean = new CommentBean<number, string>();
commentBean.setValue(1, "你好阿");
console.log(commentBean.getValue());

3.接口

什么是接口：

接口通常以interface来声明。一个类通过继承接口的方式，从而来继承接口的抽象方法；

接口并不是类，编写接口的方式和类很相似，但是它们属于不同的概念。类描述对象的属性和方法。接口则包含类要实现的方法。

除非实现接口的类是抽象类，否则该类要定义接口中的所有方法。

接口无法被实例化，但是可以被实现。一个实现接口的类，必须实现接口内所描述的所有方法，否则就必须声明为抽象类。另外，在 Java 中，接口类型可用来声明一个变量，他们可以成为一个空指针，或是被绑定在一个以此接口实现的对象。

....

可以去百度一下java中的接口的概念，就不做过多的描述了，偷个懒

//定义一个接口
interface ILogin {

    login(): void; //定义一个登录的抽象方法
 
    getUserInfo(): string; //定义一个获取用户信息的抽象方法

}

//微信登录类 实现了ILogin接口
class WeiXinHttpRequest implements ILogin {

    getUserInfo(): string { //实现接口中的方法
        return "用户信息:微信的用户信息";
    }

    login(): void { //实现接口中的方法
        console.log("执行微信登录了");
    }

}

//QQ登录类 实现了ILogin接口
class QQHttpRequest implements ILogin {

    getUserInfo(): string { //实现接口中的方法
        return "用户信息:QQ的用户信息";
    }

    login(): void { //实现接口中的方法
        console.log("执行QQ登录了");
    }

}

下一篇讲解的是用TypeScript实现一些设计模式。

TypeScript系列（二）

1.类的继承（就跟js中的原型是类似的）

2.泛型

3.接口

猜你喜欢