重要概念

  • 类 class，即模板

  • 对象，即实例

    面向对象三要素

  • 继承 - 抽离公共代码，实现代码复用

  • 封装 - 高内聚，低耦合
  • 多态 - 更好的扩展性 ``typescript class People { name: string age: number constructor(name: string, age: number) { this.name = name; this.age = age; } eat() { console.log(${this.name} eat some) } speak() { console.log(my name is ${this.name}, age is ${this.age}`) } }

/ 继承 / class Student extends People { school: string constructor(name: string, age: number, school: string) { super(name, age); // 交给父类去处理 this.school = school } study() { console.log(${this.name} study) } }

/ 继承 / class Teacher extends People { major: string constructor(name: string, age: number, major: string) { super(name, age); // 交给父类去处理 this.major = major; } teach() { console.log(${this.name} is teach ${this.major}) } }

const xiaoming = new Student(‘xiaoming’, 20, ‘A’); const dahong = new Teacher(‘dahong’, 20, ‘math’);

xiaoming.age xiaoming.name xiaoming.speak() xiaoming.eat() dahong.teach() /…/

  1. ```typescript
  2. /* 可见性修饰符 */
  3. // 当前类或者子类可以调用，外部不能访问
  4. class People {
  5.   /*...*/
  6.   protected weight: number = 100
  7. }
  9. // 仅当前类可访问，其他都不行
  10. class People {
  11.   /*...*/
  12.   private gf: string = 'pw'
  13. }
  15. // 默认值是 public 所有都可访问
  1. /*重写*/
  2. class People {
  3.   eat() { console.log('eat') }
  4. }
  6. class Stu extends People {
  7.   constructor() {
  8.     super()
  9.   }
  10.   eat () { console.log('eattttt') }
  11. }
  13. /*重载*/
  14. interface IStyleInfo {
  15.   [key: string]: string
  16. }
  18. class JQ {
  19.   css(key: string, value: string): void// 第一个地方定义
  20.   css(styleInfo: IStyleInfo): void // 第二个地方定义
  21.   css(keyOrInfo: string | IStyleInfo, value?: string): void { // 语法规定,处理逻辑
  22.     console.log(keyOrInfo, value)
  23.   }
  24. }
  26. const j = new JQ()
  27. j.css('font-size', '15px');
  28. j.css({ 'font-size': '15px', 'color': 'red' })

细节

  • 继承 super
  • 封装：可见性修饰符 public、protected、private
  • 多态：重写和重载（一个函数多参数类型）