Typescript(五) 类的构造函数 + 类的getter setter static + 抽象类和只读属性的使用

1

类的构造函数

老规矩 初始定义一个最简单的构造函数 并尝试使用一下

class Person1 {
  public name: string;
  // 这个地方就是我的构造函数 
  constructor(name: string) {
    this.name = name;
  }
}
// 后面必须传入参数 否则报错
const per1 = new Person1("xiaofu");
console.log(per1.name);

结果和你想的一样

简化一下

class Person1 {
  constructor(public name: string) {}
}
const per1 = new Person1("xiaofu");
console.log(per1.name);

输出也是没有问题的

如果是子类 继承 怎么写 ？
子类继承需要用super()用到父类的构造函数

class Person1 {
  constructor(public name: string) {}
}
// 这个地方 写继承的东西 
class Teacher extends Person1 {
  constructor(public age: number) {
  // 使用父类的方法
    super("xiaofu ");
  }
}
const teacher = new Teacher(20);
const per1 = new Person1("xiaofu");
console.log(teacher.age);
console.log(teacher.name);

结果也是很nice 的

有个需要注意的地方
只要子类需要用到构造函数 constructor 不管父类 里面有没有 constructor 都要用父类的super()

2

类的getter setter static

1）
get 用法演示
我们提到过private 这个是私人的受保护的
那么我们有没有办法访问呢 ？
答案是有的 get 和 set 方法
首先我们尝试写一个类 先不用get 和 set 我们先设置为private 受保护 然后我们尝试访问 肯定会报错的 如下

// 先写一个类  age 受到保护 在内部 写成_age
class Girl {
    // 写一个构造函数
    constructor(private _age){}
}

// 使用 里面需要填写参数
const ip = new Girl(22);
console.log(ip._age);

明显发生报错 在 ip._age

那么我们怎么处理这个事情？？

// 先写一个类  age 受到保护 在内部 写成_age
class Girl {
  // 写一个构造函数
  constructor(private _age : number) {}
  get age() {
    return this._age;
  }
}

// 使用 里面需要填写参数
const ip = new Girl(22);
console.log(ip.age);

我们甚至可以看一下结果 没有问题

这个地方有个神奇的东西 get 里面的return 可以修改 不想暴露自己真实年纪
女孩子 永远18

2）
set 用法 演示

// 先写一个类  age 受到保护 在内部 写成_age
class Girl {
  // 写一个构造函数
  constructor(private _age: number) {}
  get age() {
    return this._age - 4;
  }
  // set在这个地方需要外部写ip.age调用 不然不起作用
  set age(age: number) {
    this._age = age + 2;
  }
}

// 使用 里面需要填写参数
const ip = new Girl(22);
ip.age = 26;
console.log(ip.age);

外部ip.age调用之后 可以同时和 get 一起起作用
现在的输出 24

3）
static 静态类
我们常规类的写法和用法是这样的 你应该还记得

class Girl2 {
  sayLove() {
    return "love you";
  }
}
const up = new Girl2();
console.log(up.sayLove());

那么有没有简化版的方法呢？
引出 静态类 static
1、不需要实例化对象 不需要 new一个对象
2、可以直接调用 类名.方法

class Girl2 {
  static sayLove() {
    return "love you";
  }
}
console.log(Girl2.sayLove());

3、

抽象类和只读属性的使用

1）
依旧写出一个最简单的类 尝试使用一下

class Person3 {
  constructor(public name: string) {}
}

const per3 = new Person3("fhj");
console.log(per3.name);

结果我们看一下 可以正确打印

当前存在一个问题 ， 通过per3.name = 'ppx' 可以修改 但是我要求不能改怎么做？

这样处理 使用readonly 可以做到

class Person3 {
  public readonly _name: string;
  constructor(name: string) {
    this._name = name;
  }
}

const per3 = new Person3("fhj");

console.log(per3._name);

结果打印 正常

当我尝试更改per3.name的时候 报错

2)

抽象类的实现和使用

2） -1 关键字 abstract
怎么表达和使用呢？

abstract class Person4 {
  // 写一个抽象方法  后面不带{}
  abstract skill();
}

class Small extends Person4 {
  // 业务逻辑 都是可以不一样的
  skill() {
    console.log("写html");
  }
}

class Big extends Person4 {
  skill() {
    console.log("写css");
  }
}

class toBig extends Person4 {
  skill() {
    console.log("写js");
  }
}

需要注意的事情 ：
1、抽象类后面不带 {}
2、继承时 必须写上父类的方法
3、抽象类 不能实例化 const per4 = new Person4

我们尝试使用 一下

// class Person3 {
//   public readonly _name: string;
//   constructor(name: string) {
//     this._name = name;
//   }
// }

// const per3 = new Person3("fhj");

// console.log(per3._name);

abstract class Person4 {
  // 写一个抽象方法  后面不带{}
  abstract skill();
}

class Small extends Person4 {
  // 业务逻辑 都是可以不一样的
  skill() {
    console.log("写html");
  }
}

class Big extends Person4 {
  skill() {
    console.log("写css");
  }
}

class toBig extends Person4 {
  skill() {
    console.log("写js");
  }
}

const per5 = new Small();
per5.skill();
const per6 = new Big();
per6.skill();
const per7 = new toBig();
per7.skill();

看一下结果