把现实中的物体抽象到程序里面,就是以对象(Object)的形式存在的。

对象数据被称为属性。

对象的功能被称为方法。

类 class

人类,狗类…,一系列相似物体的集合,相同的类具有相同的属性和方法

定义

image.png

  1. class cat {
  2. name: string;
  3. age: number;
  4. static maxAge: number = 10; // 静态属性,就是这个类统一的属性
  5. run() {
  6. console.log("running")
  7. }
  8. eat() {
  9. console.log("eatting")
  10. }
  11. }

实例 new xxx( )

就是类的一个实例,可以想象成猫类其中有一只叫做Tom,毛是灰色的,Tom是cat类的一个实例。

  1. let Tom = new cat() // 创建实例

属性、方法

公共属性(public 或 省略):普通的属性都是公共属性,任意访问和修改
只读属性(readonly):只能读取,不能修改值
静态属性(static):这个类统一的属性,可以直接访问这个类的静态属性,而不是通过实例
私有属性(private):实例无法直接获取或修改的属性,只能通过这个类的某些方法来获取或修改。
好处是主动权在这个类,我不想让你获取不想让你改,你就没法搞。
或者你获取、修改时可以进行判断,符合我想要的规则,才让你搞。
子类继承后也无法直接操作私属性。

保护属性(protected):受保护的属性,只能在自己类或者子类中访问和修改,无法通过实例访问修改

  1. class cat {
  2. // 定义的是实例属性,需要通过创建实例并赋予初始值才能访问
  3. name: string;
  4. readonly leg: number = 4;// 只读属性,只能读取,不能修改值
  5. // 静态属性,就是这个类统一的属性,可以直接访问这个类的静态属性
  6. static maxAge: number = 10;
  7. // 私有属性,只有这个类有,实例无法去修改,只能通过类的方法去访问
  8. private _life:number = 9
  9. // 构造函数,见下
  10. constructor(n:string){
  11. this.name = n
  12. }
  13. // 定义实例的方法,需要通过创建实例就可以直接调用执行函数
  14. run() {
  15. console.log("running")
  16. }
  17. // 静态方法,就是这个类统一的属性,可以直接调用这个类的静态方法
  18. static eat() {
  19. console.log("eatting")
  20. }
  21. // 一般通过方法获取私有属性的值
  22. showLife(){
  23. return `猫有${this._life}条命`
  24. }
  25. // 或者通过 get方法 获取私有属性的值
  26. get life(){
  27. return this._life
  28. }
  29. // 一般通过方法修改私有属性的值
  30. die(n:number){
  31. this._life -= n; // 只能通过自己的方法,修改私有属性
  32. console.log(`还剩下${this._life}条命`);
  33. }
  34. // 或者通过 set方法 修改私有属性的值
  35. set life(n:number){
  36. if (n>0) {
  37. this._life = n
  38. }
  39. }
  40. }
  41. const Tom = new cat("Tom")
  42. console.log(Tom.name)
  43. console.log(cat.maxAge) // 可以直接访问这个类的静态属性
  44. console.log(Tom.showLife()) // 无法直接访问私有属性,必须通过内部的方法
  45. console.log(Tom.life) // 无法直接访问私有属性,除非get方法定义后才能访问
  46. console.log(Tom.die(2)) // 无法直接修改私有属性,必须通过内部的方法
  47. console.log(Tom.life = 8) // 无法直接修改私有属性,除非set方法定义后才能修改
  48. Tom.run()
  49. cat.eat() // 可以调用访问这个类的静态方法

构造函数(构造方法) constructor

创建实例时,告诉程序怎么给实例赋予初始值

  1. class cat {
  2. name: string ;
  3. age: number ;
  4. static maxAge: number = 10;
  5. // 定义构造器,用于帮助创建实例时,赋予初始值
  6. // 每创建一个实例,都会调用一次构造函数
  7. constructor(n:string,a:number){
  8. console.log(this); // this 指的是当前新创建的实例
  9. this.name = n; // 传参数进来赋初始值
  10. this.age = a;
  11. }
  12. run() {
  13. console.log(this.name + " is running") // this 指的是当前新创建的实例
  14. }
  15. static eat() {
  16. console.log("eatting")
  17. }
  18. }
  19. const Tom = new cat("Tom",4)
  20. console.log(Tom);
  21. Tom.run(); // Tom is running

简写
image.png

!可能为空

ts会判断你将要赋值的有没有可能为空,严格的验证可能会报错,如果你确定不会为空,可以加一个!号在后面,告诉ts我确定这个不会为空
image.png

继承 extends

可以继承某个类的所有属性和方法,方便减少代码量

  1. /**
  2. * 动物类
  3. * 定义一个动物类
  4. */
  5. class animal {
  6. name: string ;
  7. age: number ;
  8. constructor(n:string,a:number){
  9. console.log(this); // this 指的是当前新创建的实例
  10. this.name = n; // 传参数进来赋初始值
  11. this.age = a;
  12. }
  13. run() {
  14. console.log(this.name + " is running")
  15. }
  16. say() {
  17. console.log("动物在叫")
  18. }
  19. }
  20. /**
  21. * 猫类
  22. * 定义一个猫类,继承动物类,猫也算动物,可以有名字、年龄等动物的属性,和跑步、叫喊等动物的方法
  23. */
  24. class cat extends animal { // 继承
  25. // 也可以额外定义猫类自己的属性
  26. leg:number = 4;
  27. color:string;
  28. // 子类的构造函数要注意,需要调用父类的构造函数,传父类需要的参数
  29. constructor(n:string,a:number, l:number,c:string){
  30. super(n,a); // 这里调用父类构造函数,把子类创建实例时的参数传入
  31. this.leg = l;
  32. this.color = c;
  33. }
  34. eat() {
  35. console.log("eatting")
  36. }
  37. run() {
  38. super.run() // super 表示父类,这里调用父类的方法
  39. }
  40. say(){ // 重写父类的方法
  41. console.log("喵")
  42. }
  43. }
  44. const Tom = new cat("Tom",4,4,"black")
  45. Tom.say(); // 喵

抽象类 abstract

image.png

接口 interface

可以当做声明一个类型使用,对类进行限制,而且可以重复定义(自定义类型不可以重复定义),重复的结果是叠加。

属性不允许有实际值,方法都是抽象方法(没有实体),只考虑结构
image.png

接口就是定义一个规范,就像水管的接口,必须满足一定的规范,才能连接起来。
实现接口 implements,就是怎么满足规范。
image.png
image.png

抽象类和接口的区别

1、抽象类,可以有普通属性普通方法,也可以有抽象方法
接口,全都是没有属性,抽象方法
2、抽象类用继承 extends
接口用实现 implements

泛型

image.png

可以一次定义多个泛型

用法

1、前期不确定类型,使用时再确定,此时搞个变量,用变量表示类型
image.png
image.png

2、限定函数的参数必须具有某些属性
image.png

类分模块

每个类放在单独文件里,然后用es6的 export 暴露这个类,其他页面需要时 import 导入这个类

====================

HTML接口

HTML元素

image.png
感叹号!是告诉ts,我们确定这个不为空,否则会提示有可能为空