TypeScript实现类Class的功能--代码详情解析

/*
    传统方法中，JavaScript 通过构造函数实现类的概念，通过原型链实现继承，而在 ES6 中，我们能够使用class。TypeScript 除了实现了所有 ES6 中的类的功能以外，还添加了一些新的用法。
  从以下几个方面来解析类：
    类的定义
    类的继承
    类里面的修饰符
    静态属性和方法
    抽象类

    类（Class）
    定义了一件事物的抽象特点，包含它的属性和方法。

    对象（Object）
    类的实例，通过 new 生成。

    封装（Encapsulation）
    将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据。

    继承（Inheritance）
    子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性。

    抽象类（Abstract Class）
    抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现。

    修饰符（Modifiers）
    修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法。

    接口（Interfaces）
    不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口。

   
    */

    // 类的定义  使用 class 定义类，使用 constructor 定义构造函数。类一般包括属性 + 方法。
   class Greeter {
        greeting: string;//限定参数只能是字符串
        age: number;
        constructor(message: string,age: number) {
            this.greeting = message;
            this.age = age;
        }
        greet() {
            let induceself = `你您好，我叫${this.greeting},我来自蓝翔，今年${this.age}了`
            console.log(induceself);
        }
  }
  
  let greeter = new Greeter("2323",23);
      greeter.greet();

    //类的继承
    class Person{
        name:string;
        age:number;
        constructor(name:string,age:number){
            this.name = name;
            this.age = age;
        }
        //父类的方法
        run():void{//没有返回值 void
            console.log(`${this.name}今年${this.age}岁了，喜欢去健身和打球`);
        }
    }


    //孩子继承父亲
    class Child extends Person{
        dog:string;
        namechild:string;
        agechild:number;
        constructor(name:string,age:number,namechild:string,agechild:number,dog:string){
            //this.name = name;
            super(name,age);//初始化父类的构造函数 并将父类的属性都继承过来
            this.dog = dog;
            this.namechild = namechild;
            this.agechild = agechild;
        }
        paly(){
            console.log(`我叫${this.namechild}，今年${this.agechild}岁了，我喜欢和${this.age}岁的${this.name}去游泳，此外我还养了一只宠物叫做${this.dog}`);
        }
    }
    let father = new Person("爸爸",35);
    //father.run();//父类自己的方法
    let child = new Child("爸爸",35,"小明",10,'旺财');//通过原型链找到父元素的所有属性和方法
    child.run();//继承父类的方法变成自己的方法
    child.paly();//小明自己的方法


    /*三种修饰类的修饰符
    1.public： 共有的，在当前类里面、子类里面、外部可以访问
    2.protectd： 保护类型 在当前类里面、子类里面可以访问，在类的外部不可以访问
    3.private：私有的，在当前类里面可以访问，子类、类外部都无法访问
    */
   //public修饰符 父类
   class PublicClass{
       public name:string;
       constructor(name:string){
          this.name = name;
       }
       playfun(){
           document.write(`${this.name}在类里面能访问`)
       }
   }
   //public修饰符 子类
   class ChildClass extends PublicClass{
        constructor(name:string){
            super(name);
        }
        playfunChild(){
            document.write(`${this.name}在子类里面能访问`)
        }
   }
   let publicClass = new PublicClass("public");
   let childClass = new ChildClass("public");
   publicClass.playfun();
   childClass.playfunChild();
   console.log(childClass.name);


//protected修饰符 父类
class ProtectedClass{
    protected name:string;
    constructor(name:string){
        this.name = name;
    }
    ProtectedF(){
        console.log(`${this.name}类里面能访问`)
    }
}
//protected修饰符 子类
class ChildProtectedClass extends ProtectedClass{
    constructor(name:string){
        super(name);
    }
    ProtectedC(){
        console.log(`${this.name}子类里面能访问`)
    }
}

let protectedClass = new ProtectedClass("protected");
let childProtectedClass = new ChildProtectedClass("protected");
protectedClass.ProtectedF();
childProtectedClass.ProtectedC();
//console.log(protectedClass.name); 类外部不能访问 报错


//private修饰符 私有 父类
class PrivateClass{
    private name:string;
    constructor(name:string){
        this.name = name;
    }
    PrivateClassF(){
        document.write(`${this.name}在类里面能访问`)
    }
}
//private修饰符 私有 子类
class PrivateClassChild extends PrivateClass{
    constructor(name:string){
       super(name);
    }
    PrivateClassC(){
        //document.write(`${this.name}在子类不能里面能访问`) 报错
    }
}
let privateClass = new PrivateClass("private1");
//console.log(privateClass.name); 在外部也不能访问


/*
类中的静态方法和静态属性
修饰符 static ,语法一般都是 static+属性/方法
他们不需要实例化，直接使用类名来调用属性和方法，语法 类名+属性/方法

Es5种的静态方法和静态属性
function Person(){
    this.fun = function(){}//实例方法 实例后调用
}
Person.fun2 = function(){}/静态方法 类名直接调用
Person.name = "lucy";//静态属性
Person.fun2();//静态方法的调用
*/
//TypeScript的静态方法和静态属性
class StaticClass{
    public name:string;
    public age:string="18";
    static sex:string="男";
    static id:string ="11212";//静态属性
    constructor(name:string){
        this.name = name;
    }
    paly1(){
        document.write(`${this.name}热爱运动`)
    }
    static paly2(){//静态方法
        console.log(StaticClass.sex+`喜欢安静`)
    }
}
var staticClass = new StaticClass("美女");
document.write(StaticClass.id);
StaticClass.paly2();



/*
  抽象类：
   abstract用于定义抽象类和其中的方法和抽象方法
   什么事抽象类？
    
*/
//首先，抽象类是不允许背实例化的： 
abstract class AbstractClass{
    public name:any;
    public constructor(name:any){
        this.name = name;
    }
    public abstract sayHi():any;
    public abstract fun():void;
    public abstract fun1():string;
    public abstract fun2():number;
    protected abstract fun3():number;

}

//子类继承可以实现实例化 实现父类的抽象类接口
class AbstractChild extends AbstractClass{
    constructor(name:string){
        super(name);
    }
    public sayHi(){
        //console.log(`${this.name}抽象方法必须被子类实现`);
        return this.name
    }
    public fun(){
        console.log(`${this.name}抽象方法必须被子类实现`);       
    }
    public fun1(){
        //console.log(`${this.name}抽象方法必须被子类实现`);
        return this.name
    }
    public fun2(){
        //console.log(`${this.name}抽象方法必须被子类实现`);
        return 0
    }
    protected fun3(){//外部访问不到
        //console.log(`${this.name}抽象方法必须被子类实现`);
        return 1
    }
}
//let abstractClass = new AbstractClass("3434"); 不能直接实例化 只能借助子类来实现父类里面的方法
let abstractChild = new AbstractChild("abstractChild");
abstractChild.sayHi();
console.log(abstractChild.sayHi())