第一阶段.模块二：学习笔记-TypeSrcipt的类

文章内容输出来源：拉勾教育大前端高薪训练营
文章说明：文章内容为学习笔记，学徒之心，仅为分享; 如若有误，请在评论区指出，如若您觉得文章内容对您有一点点帮助，请点赞、关注、评论，共享

上一篇：第一阶段.模块二：学习笔记-es6的类进阶
下一篇：第一阶段.模块二：学习笔记-TypeSrcipt的枚举

ts 中的类

ts 中创建类的时候，类名的首字母要大写例如：class Animal{}
ts 中的类和 es6 中的类，基本一致，只不过写法不一致而已
ts 中创建类的时候，类中的属性必须要声明，否则报错，es6 中不用声明

1-ts 中的类的基础

class Animal {
  name:string = 'haha' // 不声明报错
  age:number = 0 // 不声明报错
  constructor(name:string, age:number) {
    this.name = name
    this.age =age
  }
  getAnimal() {
    console.log(`狗的名字叫做${this.name},今年${this.age}岁了`)
  }
}
const dog = new Animal('花花', 3)
dog.getAnimal()

2-ts 中的类修饰符

1、public 公共修饰符

如果不指定，默认是 public

2、private 私有修饰符

类的外部是无法访问的，包括类的实例也不行
继承的子类也无法访问
类本身通过类名.属性名也不行

3、protected 受保护修饰符

类的外部是无法访问的，包括类的实例也不行
类本身通过类名.属性名也不行
继承的子类可以访问父类中受保护的方法，但是受保护的属性是不能访问的 --重要
父类的 constructor 前面加上 protected，只能被子类继承，不能通过父类来创建对应的实例

3-ts 中的类的 readonly 修饰符

// readonly 修饰符是和public、private、protected 一块使用的，不写默认是public
// public readonly age: number = 0

class Animal {
  name: string = 'haha'
  readonly age: number = 0 // readonly
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  getAnimal() {
    console.log(`狗的名字叫做${this.name},今年${this.age}岁了`)
  }
}
const dog = new Animal('花花', 3)

dog.getAnimal()
dog.name = '小白'
// dog.age = 10 // Cannot assign to 'age' because it is a read-only property.
dog.getAnimal()

4-ts 中的类的参数属性

class A {
  // 通过在参数前面加上任意的4个修饰符中的一个
  // 就可以代替定义属性 和 this.属性名 = 属性名
  constructor(public name: string) {
  }
  // 等价于
  //  public name:string
  // constructor(name: string) {
  //     this.name = name
  // }
}
const a = new A('hello')
console.log(a.name)
a.name = '888888888888'
console.log(a.name)

5-ts 中的类的静态属性

// 通过关键字 static 来实现，
// 静态属性，是能在类本身内部 通过类名本身 来访问，除此之外的任何地方都不能访问

class B {
  private static names:string = 'hello'
  constructor() { }
  getNames() {
    console.log(B.names) // 只能通过类名本身在类的内部调用
    // console.log(this.names) // Property 'names' is a static member of type 'B'
  }
}

const b = new B()
// console.log(b.names) // Property 'names' is a static member of type 'B'
b.getNames()

6-ts 中的类中可选类属性

// 通过关键字 ? 号 来实现

class B {
  name: string = 'hello'
  age?: number = 0 // 类中可选参数
  sex?: string = '' // 类中可选参数

  constructor(name: string, age?: number, sex?: string) {
    this.name = name
    this.age = age
    this.sex = sex
  }
}

const b = new B('花花', 23, '男')
console.log(b) // B {name: "花花", age: 23, sex: "男"}

7-ts 中的类中的存取器 set 和 get

// 和es6的用法是一样的

class B {
  name: string = 'hello'
  age?: number = 0 // 类中可选参数
  sex?: string = '' // 类中可选参数
  private address: string = ''

  constructor(name: string, age?: number, sex?: string) {
    this.name = name
    this.age = age
    this.sex = sex
  }
  // 获取取值器函数get
  get getAddress() {
    return this.address
  }
  // 设置取值器函数set
  set setAddress(val: string) {
    this.address = val
  }
}

const b = new B('花花', 23, '男')
console.log(b) // B {name: "花花", age: 23, sex: "男"}
// 设置取值器函数set
b.setAddress = '大兴区'
// 获取取值器函数get
console.log(b.getAddress)

8-ts 中的类中的抽象类

1、抽象类一般用于被其他类继承，不能直接用抽象类来创建实例
2、使用 abstract 关键字来定义抽象类，抽象类中可以没有抽象方法
3、使用 abstract 关键字来定义抽象方法，抽象方法一定在抽象类中
4、A 类继承抽象类，抽象类中有抽象方法，不会自动继承，需要手动在 A 类中，自己写一下才行
4、简言之：如果抽象类中有抽象方法，继承的类中，一定要自己手写对应的抽象方法，否则报错

// 抽象类
abstract class People {
  constructor(public name: string) {}
  // 抽象方法,只定义方法的类型即可,
  // 不需要写具体的方法,具体的方法由继承的类来写
  public abstract getName(): string
}
class Mans extends People {
  constructor(name: string) {
    // super(name)
    super('name')
    this.name = name
  }
  // 实现父类中的抽象方法
  getName() {
    return this.name
  }
}
const mans = new Mans('姓名')
console.log(mans.getName()) // 姓名

// 抽象类中的 抽象属性  抽象的存取值set get 函数
// 抽象的存值器函数set 不能标明返回值的类型，否则报错
abstract class Sport {
  constructor() {}
  abstract sportsName: string // 抽象属性
  abstract get getSportsName(): string // 抽象取值器函数，虽然叫函数，实际上就是一个属性
  abstract set setSportsName(name: string) // 抽象存值器函数，虽然叫函数，实际上就是一个属性
}

class S extends Sport {
  sportsName: string = ''
  constructor(name: string) {
    super()
    this.sportsName = name
  }
  // getSportsName: string =''
  // setSportsName:string = ''
  get getSportsName() {
    return this.sportsName
  }
  set setSportsName(val: string) {
    this.sportsName = val
  }
}

const s = new S('抽象属性')
console.log(s.sportsName) // 抽象属性
s.setSportsName = '修改后的抽象属性'
console.log(s.getSportsName) // 修改后的抽象属性

9-ts 中的类中的实例类型

class People {
  constructor(public name: string) {}
}
// 实例 p 的 类型 是 类People，可以省略不写
// let p:People = new People('hello')
let p = new People('hello')

class Animal {
  constructor(public name: string) {}
}
// s实例 p 的 类型 是 类People
p = new People('hello')
console.log(p instanceof People) // true
console.log(p instanceof Animal) // false
console.log(p.name)

10-对前面跳过知识的补充【接口 + 类】

类、类的类型接口
1、类的类型接口可以强制规定类中包含哪些内容
2、接口可以继承（extends）接口类可以继承（extends）类，
3、类可以实现（implements）接口
4、（1）接口可以继承（extends）类
4、（2）继承类的成员和成员类型，但是不包括其实现，也继承类的 private、protected 修饰的成员
4、（3）当接口继承的类中包含有 private、protected 修饰的成员的时候，该接口只可被这个类和子类来实现
5、接口检测的是使用该接口定义的类创建的实例
6、继承和实现的顺序是：先继承后实现

结语：
来拉钩教育训练营学习已经有三周了，在没有来之前，我都是回家之后打游戏（游戏名：斗战神），来到这里之后才发现居然还有很多大佬也在学习，真的很惊讶，本人自身水平垃圾的一批，再不学习，以后可能一直就是混吃等死的状态了

首先来说，拉钩的课程很干，每个视频很短，都是干货，讲师没有一句废话，视频内容覆盖比较广，布置的作业也比较符合实际，导师也会及时批改，然后一周或两周必有直播，直播都会回答学习过程中所遇到的问题和新的内容

其次来说，每个班都有班级群，群里居然还有5年或6年的前端开发的大佬(⊙▽⊙)；班主任和导师也在群里，有任何问题都可以在群里@导师，班级群真的很活跃

最后来说一句，如果有其他人也是在打游戏混日子，不如来拉钩教育训练营，尝试着改变一下自己目前所处的环境