TS定义class类 及类之间继承方法

ES5的话 类主要靠的是构造函数原型链 这个就不多说了 感兴趣的朋友可以去看一下 但构造函数和原型链的用法 我老实说 他开始展现出被一些更规范语法取代的意向

ts定义一个基础类通过一个class的关键字
代码如下

class min{
  name:String;
  constructor(){
    this.name = '你好';
    console.log(this.name);
  }
}
let mint = new min();

运行效果就是 打印出了 ( 你好 ) 两个字
这里class 后的min是类的名字 这个大家可以随便起名
最上面的name是定义在类中的属性 constructor是类的构造函数
当这个类被实例化是 构造函数会自动执行
通常用来给类中的属性赋值

TS类中还可以定义函数 我们来看个有点多的代码

class min{
  name:String;
  age:Number;
  constructor(name:String, age:Number){
    this.name = name;
    this.age = age;
  }
  getName():String {
    return this.name
  }
  getAge():Number {
    return this.age
  }
  setAge(age):void {
    this.age = age
  }
  setName(name):void {
    this.name = name
  }
}
let mint = new min('裴元吉', 22);
console.log(mint.getAge())
console.log(mint.getName())
mint.setAge(50)
console.log(mint.getAge())
mint.setName('黄忠')
console.log(mint.getName())

这个代码相对就有点多了 确实也简单 我们在类中定义了两个属性
name:String 字符串类型的属性name
age:Number 数字类型的属性age
类的构造函数接收两个参数 然后在构造函数中给类自己的两个属性赋值
分别定义类他们的get和set方法
然后用一个mint 属性接收实例化min类 注意 实例化类就相当于调用了他的构造函数 就也要传递构造函数需要的参数
这里我们的打印效果如下
在这里插入图片描述

其次就是类的继承 这里我们就用上面的代码小改一下


class min{
  name:String;
  age:Number;
  con:String;
  constructor(name:String, age:Number){
    this.name = name;
    this.age = age;
  }
  getName():String {
    return this.name
  }
  getAge():Number {
    return this.age
  }
  setAge(age):void {
    this.age = age
  }
  setName(name):void {
    this.name = name
  }
}
class kowd extends min{
  con:String;
  constructor(name:String, age:Number,con:String){
     super(name,age)
     this.con = con;
     console.log(con);
  }
}
let mint = new kowd('裴元吉', 22, '我是新来的');
console.log(mint.getAge())
console.log(mint.getName())
mint.setAge(50)
console.log(mint.getAge())
mint.setName('黄忠')
console.log(mint.getName())

这里大家可以发现唯一不同的地方在于这个kowd
这里我们声明了一个kowd类 他通过关键字extends继承了我们之前声明的类min
其他的没什么 但继承了父类那在工造函数中一定要调用super 并在这个函数中传递父类构造函数中需要的参数 否则就会报错

然后在子类中可以拿到父类的属性和函数
这段代码的输出效果如下
TS定义class类 及类之间继承方法_第1张图片

你可能感兴趣的:(typescript,前端,javascript)