TypeScript中类的使用详解

Posted 2021-10-15 老张在线敲代码

类的简介：

类中主要包含了俩个部分：属性跟方法

类直接去获取实例上的方法和属性是获取不到的
所以类可以通过在属性或者方法前加static来获取实例中的方法和属性

属性和方法前加readonly表示只读的不可修改的

class Person{
// 定义实例属性
// readonly开头的属性表示只读的属性，不可修改
     name:string = "孙悟空";
    static age:number = 18

    // 定义方法
    static sayHello(){
        console.log("我是sayHello函数")
    }
}
//per是person的实例
// person类无法直接获取到实例中的属性
const per = new Person()
console.log(per);
per.name = "ccc";
console.log(per.name);
console.log(Person.age);

// per.sayHello()
Person.sayHello()

构造函数和this的使用

构造函数constructor，他在对象创建时候被调用

```handlebars
//通过构造函数创建多个不同名字和年龄的狗子
class Dog{
    name:string;
    age:number;
    constructor(name,age){
        // console.log("构造函数执行了");
        // this表示当前的实例,在构造函数中当前对象就是新创建的那个对象
        this.name = name;
        this.age = age
    }
    sayDog(){
        //在方法中可以通过this来表示调用方法的对象
        alert(this.name)
    }
}
const dog = new Dog("小黑",4)
const dog1 = new Dog("小白",2)
const dog2 = new Dog("旺财",21)
const dog3 = new Dog("大黄",12)
console.log(dog);
console.log(dog1);
console.log(dog2);
console.log(dog3);

``

类的继承

Animal类为父类，让cat类跟bird类去继承Animal中的方法和属性，继承之后子类拥有了父类中的方法和属性

子类中可以直接添加父类中没有的方法,如果子类中添加了父类中相同的方法，子类的方法就会覆盖掉父类中的方法，子类中这种覆盖父类方法的方式叫做重写

如果在子类中写了构造函数constructor,我们必须对父类的构造函数使用super（父类中的属性）进行调用,否则就会中断继承

(function(){
    //定义一个Animal类
    class Animal{
        name:string;
        age:number;
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        sayMiao(){
            console.log("动物在叫唤");
            
        }
    }
    //通过继承我们可以将多个子类中的方法都放入父类中
    //这样我们只需要写一次就可以拥有子类中的全部的方法和属性
    //如果希望在子类中添加一些父类中没有的方法或者属性,直接加就行
    class Cat extends Animal{
        run(){
            console.log("子类中又定义了一个父类中没有的方法")
        }
        sayMiao(){
            console.log(cat.name+":我爱吃小雀儿");
            
        }
    }
    //使bird类继承animal类
    class Bird extends Animal{
        //如果在子类中添加了父类中有的方法,子类的方法就会覆盖掉父类中的方法
         //子类中这种覆盖父类方法的方式叫做重写
        sayMiao(){
            console.log(bird.name+":我爱被咪咪吃");
        }
    }
    const cat = new Cat("咪咪",22);
    console.log(cat);
    cat.sayMiao()
    cat.run()
    const bird = new Bird("小雀儿",22);
    console.log(bird);
    bird.sayMiao()
})()

抽象类

abstract和其他类区别不大只是不能用来创建对象
抽象类就是专门用来继承的类

(function(){
    abstract class Animal{
        name:string;
        constructor(name){
            this.name = name
        }
        sayHello(){
            console.log("我不会叫")
        }
    }
    class Ant extends Animal{
        sayHello(){
            // super是父类的实例
            // super.sayHello()
            // 子类中如果想引用父类的方法时用super
            // 不用super的话子类中重复创建父类的函数就会覆盖掉父类中的函数方法
            console.log("我不会叫+1")
            // 如果在子类中写了构造函数constructor,我们必须对父类的构造函数进行调用,否则就会中断继承
        }
    }
    const ant = new Ant("蚂蚁")
    ant.sayHello()
    console.log(ant)
})()

类中接口的使用

接口就是用来定义一个类的结构,用来定义一个类中应该包含哪些属性和方法，相当于对类的限制

(function(){
    //描述一个对象类型
    type myType = {
        name:string,
        age:number
    }
    //接口完全可以当成类型声明去使用
    interface myJieKou{
        name:string;
        age:number
    }
    //接口i可以重复声明
    interface myJieKou{
        gender:string
    }
   
    //接口可以在定义类的时候去限制类的结构
    //所有的属性在接口中都不能有实际的值
    //接口定义一个对象时不考虑实际值
    //在接口中所有的方法都是抽象方法
    interface myJieKou1{
        name:string,
        sayHello():void
    }
    const obj:myJieKou = {
        name:"zyb",
        age:11,
        gender:"男"
    }

    //定义类时候可以用类实现一个接口,让类满足接口的要求
    //接口就是对类的限制
    class MyJieKou2 implements myJieKou1{
        name: string
        constructor(name){
            this.name = name
        }
        sayHello(): void {
            console.log("大家好")
        }
        
    }
})()