文章内容输出来源：拉勾教育大前端高薪训练营
文章说明：文章内容为学习笔记，学徒之心，仅为分享; 如若有误，请在评论区指出，如若您觉得文章内容对您有一点点帮助，请点赞、关注、评论，共享
上一篇：第一阶段.模块二：学习笔记-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年的前端开发的大佬(⊙▽⊙)； 班主任和导师也在群里，有任何问题都可以在群里@导师，班级群真的很活跃
- 最后来说一句，如果有其他人也是在打游戏混日子，不如来拉钩教育训练营，尝试着改变一下自己目前所处的环境