009_TypeScript 第九章( TS 的类 )

• 类 ( class ) : 不仅仅是 TS 内给出的, 在 ES6 里面就有类这个概念了, 只不过 TS 让我们的类更加的强大了
• 我们默认你是认识 ES6 内的 类 的, 如果你还不会, 那么建议你先学习一下 ES6 内的类

定义类

• 在定义类的时候, 我们通常会在 constructor 内定义属性, 就像这样

  class Person {
    constructor(name: string) {
      this.name = name
    }
  }

  

• 咋又报错了呢, 是因为在 TS 内, 定义类的属性, 需要提前在 类 内进行说明

  class Person {
    name: string
  
    constructor(name: string) {
      this.name = name
    }
  }

  • 只有提前说明过得属性, 才可以在 constructor 内进行定义和赋值

类的继承

• 这里类的继承其实和 ES6 没有什么区别
• 只要注意, 不管是子类还是父类, 我们在定义属性的时候, 提前在 class 内进行说明即可

class Person {
  name: string

  constructor(name: string) {
    this.name = name
  }

  sayHi() {
    console.log(this.name)
  }
}

// 创建一个继承自 Person 的 Student 类
class Student extends Person {
  age: number

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

类属性的修饰符

• 就是对于类里面定义的属性的一些修饰

public

• 公共的, 公开的, 没有任何限制
• 其实我们默认定义的属性就是 public 修饰符
• 也就是说, 你在定义属性的时候, 如果不写任何修饰符, 默认就是 public
• 当然, 你也可以明确的标明

class Person {
  public name: string
  age: string

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

  sayHi() {
    console.log(this.name)
  }
}

• 这里的 name 和 age 是一样的修饰
• 可以自己用, 可以被继承

private

• 私有的, 只能在当前类内部使用
• 被 private 修饰符修饰的成员, 不能被继承, 不能再类外面使用
• 也就是说, 不管是自己的实例, 还是子类都不能使用这个属性
• 只有在当前类内才可以使用

class Person {
  name: string
  private gender: string

  constructor(name: string, gender: string) {
    this.name = name
    this.gender = gender
  }

  sayHi() {
    console.log(this.name, this.gender)
  }
}

// 创建一个 Person 的实例
const p = new Person('Jack', '男')
console.log(p.gender)

// 创建一个继承自 Person 的 Student 类
class Student extends Person {
  constructor(name: string, gender: string) {
    super(name, gender)
  }

  say() {
    console.log(this.gender)
  }
}

const s = new Student('千锋教育', '男')
console.log(s)

protected

• 和 private 差不多, 也是私有的意思
• 但是用 protected 标识的属性, 可以被继承, 可以再子类内使用
• 但是依旧在类的外面是不能使用的

class Person {
  name: string
  protected gender: string

  constructor(name: string, gender: string) {
    this.name = name
    this.gender = gender
  }

  sayHi() {
    console.log(this.name, this.gender)
  }
}

const p = new Person('Jack', '男')
console.log(p.gender)

// 创建一个继承自 Person 的 Student 类
class Student extends Person {
  constructor(name: string, gender: string) {
    super(name, gender)
  }

  say() {
    console.log(this.gender)
  }
}

const s = new Student('千锋教育', '男')

console.log(s)

• 在 Student 类内使用 gender 属性是没有问题的, 因为会被继承下来

readonly

• 这个修饰符就简单的多了, 就是一个只读属性, 不允许被修改

class Person {
  name: string
  readonly gender: string

  constructor(name: string, gender: string) {
    this.name = name
    this.gender = gender
  }

  setGender() {
    this.gender = '女'
  }
}

const p = new Person('Jack', '男')

console.log(p.gender)

类的存取器

• 在类里面我们也可以定义 getter 获取器 和 setter 设置器

• 方便我们对于某些私有的值进行操作

• 看下面这个例子

  class Person {
    private name: string = 'Jack'
  
    getName() {
      return this.name
    }
  
    setName(val: string) {
      this.name = val
    }
  }
  
  const p1 = new Person('Jack')
  
  // 我想获取内部的私有属性 name 的值
  console.log(p1.getName()) // 'Jack'
  
  p1.setName('Rose')
  
  console.log(p1.getName()) // 'Rose'

• 这个时候, 我们可以用 getter 和 setter 语法糖来简化这些操作

  class Person {
    private _name: string = 'Jack'
  
    get name() {
      return this._name
    }
  
    set name(val: string) {
      this._name = val
    }
  }
  
  const p1 = new Person()
  
  // 我想获取内部的私有属性 name 的值
  console.log(p1.name) // 'Jack'
  
  p1.name = 'Rose'
  
  console.log(p1.name) // 'Rose'

• 和我们闭包的语法糖是一样的效果, 我们可以直接把它想象成一个私有的闭包

静态属性

• 这就和我们原先在 ES5 说的万物接对象是一个道理
• 我们可以在 类 上定义一个静态属性或方法
• 是给到当前类的, 并不是给实例使用的, 是属于该类的

class Person {
  static name: string = '许小墨'

  // 如果你想在类里面使用 name 成员, 也要借助这个类
  sayHi() {
    console.log(Person.name)
  }
}

const p = new Person()

console.log(Person.name)

console.log(p.name)

抽象类

• 我们在开发中, 会发现很多时候我们会用到继承

• 一旦我们用到继承以后, 我们就发现, 父类其实对我们来说, 我们不会去创建父类的实例

• 而只是作为基准使用

• 在 TS 内提出的抽象类的概念, 其实就是最为一个基准类

• 专门为了让别人继承, 自己不在作为类去创建实例了

  class Person {
    name: string
  
    constructor(name: string) {
      this.name = name
    }
  
    play() {}
  }
  
  class Student extends Person {
    constructor(name: string) {
      super(name)
    }
  }

  • 这样我们就实现了继承
  • 但是在这个过程中, 我们的 父类 其实也是可以单独作为一个 类 使用的
  • 可是我们在开发的过程中, 大部分时候其实并不需要用到
  • 也不希望这样直接被用到
  • 而且在子类中还需要 super 去继承属性下来

• 这个时候我们就可以把父类直接定义为抽象类

  // 定义一个抽象类
  abstract class Person {
    name: string
  
    constructor(name: string) {
      this.name = name
    }
  
    play() {}
  }
  
  // 子类照常继承, 我们不需要有任何怀疑
  class Student extends Person {}
  
  const s = new Student('Jack')
  
  s.play()

  • 所有的继承也都能照常完成

• 在抽象类内, 也可以抽象方法出来

  • 但是一旦你要抽象方法, 那么就和定义接口差不多了
  • 只能在抽象类内标出限制, 但是不能由具体实现
  • 需要在其继承后的子类内书写准确实现

  abstract class Person {
    name: string
  
    constructor(name: string) {
      this.name = name
    }
  
    // 这里只能书写限制
    abstract play(): void
  }
  
  class Student extends Person {
    // 在子类内进行具体的实现
    play() {
      console.log('你好 世界')
    }
  }