TypeScript中的类和类的继承

typescript中为了使编写的代码更规范，更有利于维护，增加了类型校验,语法类型和类型不匹配会报错,typeScript中类和类的继承有类的定义、继承、类里面的修饰符、静态属性、静态方法、抽象类、继承、多态

TypeScript中的类和类的继承

• js严格模式 放在js的最顶部

“use strict”;

类的定义

• es5w

  "use strict";
  function Person(name) {
      this.name = name;
      this.run = function () {
          console.log(this.name);
      };
  }
  var p = new Person('张三');
  p.run();

• **ts 类的定义**

  "use strict";
   class person{
       name:string;   //属性  前面省略了public关键词
       constructor(n:string){  //构造函数   实例化类的时候触发的方法
            this.name=n;
       }
       run():void{
           console.log(this.name)
       }
   }
   var p_ = new person('张三')
   p_.run()

• ts 类的定义 在类里边定义方法以及方法传值 改变属性以及获取属性的值

  class class_p{
      name:string;   //属性  前面省略了public关键词
      constructor(name:string){  //构造函数   实例化类的时候触发的方法
           this.name=name;
      }
      getName():string{//获取name
          return this.name;
      }
      setName(name:string):void{//设置name
         this.name = name
         console.log(this.name )
      }
  }
  var c_p= new class_p('张四')
  console.log(c_p.getName())
  c_p.setName('aa')

  2 ts中实现继承 extends/super

• 父类子类有相同方法的时候 调用子类会先去子类找如果没有再去父类里找

  // 父类
  "use strict";
   class Peopel{
       name:string; //属性如果不加属性修饰符 默认就是公有（public）
       constructor(name:string){
            this.name = name
       }
       run():string{
           return `${this.name}在运动`
       }
   }
   var pe_ = new Peopel('王五')
   console.log(pe_.run())
  //继承 extends
  class Web extends Peopel{
      constructor(name:string){
      //初始化父类构造函数
      super(name)//调用父类的构造函数name传到父类
     }
     run():string{
         return `${this.name}在运动--子类`
     }
     work():string{
      return `${this.name}在工作`
     }
  }
  var w = new Web('小猪')
  console.log(w.run())

  类里面的修饰符

• typescriprt里面定义类的时候给我们提供了三种修饰符

  public 公有 ：在类里面、子类、类外面都可以访问
  protected 保护类型 ： 在类里面和子类里面可以访问 在类外部无法访问
  private 私有：在类l里面可以访问 。子类 类外部都没法访问

• **属性如果不加属性修饰符 默认就是公有（public）**

  public :公有 在类里面、 子类 、类外面都可以访问

  "use strict";
   class Peopel_{
       public name:string; //属性如果不加属性修饰符 默认就是公有（public）
       constructor(name:string){
               this.name = name
       }
       run():string{
           return `${this.name}在运动`
       }
   }
   var pe_ = new Peopel('王五')
   console.log(pe_.run())
    //继承 extends
   class Web_ extends Peopel_{
       constructor(name:string){
           ///初始化父类构造函数
           super(name)//调用父类的构造函数name传到父类
       }
       run():string{
           return `${this.name}在运动--子类`
       }
       work():string{
           return `${this.name}在工作`
       }
   }
   var w = new Web_('小猪')
   console.log(w.run())

• 类外部访问公有属性

  class Person_n{
          public name:string;  /*公有属性*/
          constructor(name:string){
              this.name=name;
          }
          run():string{
              return `${this.name}在运动`
          }
      }
  
  var class_ =new Person_n('哈哈哈');
  console.log(class_.run());
  console.log(class_.name);

  protected：保护类型

• 在类里面、子类里面可以访问 ，在类外部没法访问

  "use strict";
  class CPerson{
      protected name:string;  /*公有属性*/
      constructor(name:string){
          this.name=name;
      }
      run():string{
          return `${this.name}在运动---父类`
      }
  }
  var np=new CPerson('王五');
  console.log( np.run())
  
  class nWeb extends CPerson{
       constructor(name:string){
          super(name);  /*初始化父类的构造函数*/
      }
      work(){
          console.log(`${this.name}在工作-子类`)
      }
  }
  
  var Nw=new nWeb('李四11');
  Nw.work();
  console.log( Nw.run());

• **类外部没法访问保护类型的属性**

  class Person_p{
      protected name:string;  /*保护类型*/
      constructor(name:string){
          this.name=name;
      }
      run():string{
          return `${this.name}在运动`
      }
  }
  var  a=new Person_p('哈哈哈');
  //在ts里报错 但是转换为es5浏览器还是可以访问
  console.log(a.name);

  private ：私有

• 在类里面可以访问，子类、类外部都没法访问

  "use strict";
  class Person_pri{
      private name:string;  /*私有*/
      constructor(name:string){
          this.name=name;
      }
      run():string{
          return `${this.name}在运动`
      }
  }
  //继承Person_pri
  class Web_pir extends Person_pri{
      constructor(name:string){
          super(name)
      }
      work(){
          console.log(`${this.name}在工作`)
      }
  }
  
  var pri = new Web_pir('aaaa')
  console.log(pri.work())
  alert(pri.run());

• 私有：类外部都没法访问

  class Person_a{
      private name:string;  /*保护类型*/
      constructor(name:string){
          this.name=name;
      }
      run():string{
          return `${this.name}在运动`
      }
  }
  var  b=new Person_a('哈哈哈');
  console.log(b.name);  //ts中为错误语法

赏

谢谢你请我吃糖果

支付宝

微信