TypeScript Class类的使用

前言

参考：满哥的笔记

ES5的时候javascript使用原型的概念来描述对象。
ES6的时候提供了一种更接近传统语言(比如java)的写法，引入了Class类的概念，也是一种描述对象的方法。
ES6的Class关键字可以看作是一种语法糖，在ES5的原型写法上进行了封装，让对象原型的写法更加清晰，更符合面向对象的编程方法。

至于ES6如何定义一个类，请看下面。

// ES6定义一个类，没有使用TS
class Person {
    
    
  constructor(name, age){
    
     //构造方法，用来接收参数
    //this 代表的是实例对象
    // this.xxx 时, 该xxx属性就已经在this中创建了
    this.name = name 
    this.age = age
  }
  say(){
    
     //类的方法，不需要加上function
    return this.name + '+' + this.age
  } 
}
// 实例化类
let per = new Person('xinz', 20)
console.log(person1.say()) //xinz + 20 

TS定义类中的变量

和ES6中定义类似，区别在于不能直接在constructor上定义变量，需要先声明后定义变量。

// TS定义一个类，重写上面的传统类方法定义
class Person {
    
    
    // 先声明变量
    name: string
    age: number
  	// 之后才能在constructor上面定义 
    constructor(name: string, age: number){
    
    
        this.name = name
        this.age = age
    }
    say(){
    
    
        return this.name + '|' + this.age
    }
}
let per = new Person('xinz', 20)
console.log(per.say())

TS类的修饰符

类的修饰符有** public、private 和 protected**, 这些修饰符都是修饰在变量声明的时候。

class Person {
    
    
  public name: string
  private age: number
  protected other: string
  constructor(name: string, age: number, other: string) {
    
    
    this.name = name
    this.age = age
    this.other = other
  }
  say(){
    
    
    return this.name + '|' + this.age + ', ' + this.other
  }
}

let per = new Person('xinz', 20, 'supplementary instruction...')

// 1. 通过 public 声明的是公共变量，如果不加修饰符默认声明就是公共变量
// 可以通过实例化后的对象(外部)访问，也可以类本身(内部)访问
console.log(per.name, per.age, per.other)

// 2. 通过 private 声明的是私有变了
// 只能在类里面访问，因此需要在类中定义方法暴露私有变量
console.log(per.say()) //间接访问了 age 私有变量

// 3. 通过 protected 声明的是受保护的变量
// 只能在类的内部访问，或者通过在继承的子类中访问，不能在外部访问。
class Man extends Person {
    
     //继承 Person 的子类
  constructor() {
    
    
    super('man', 19, 'supplementary instruction...')
    console.log(this.other) //子类构造方法内部访问
  }
  sayOther() {
    
    
    console.log(this.other) //子类方法内部访问
  }
}
let man = new Man()
console.log(per.say()) //通过父类方法间接访问
console.log(man.sayOther()) //通过子类方法间接访问

TS静态属性和静态方法

静态属性和方法就是使用 static 关键字声明的属性和方法，该属性和方法只能通过类名去进行调用, 不能通过 this 在类中访问。

注意：如果类中有两及以上的静态方法，静态方法之间内部可以通过 this 调用另外一个静态方法。

// 定义类
class Person {
    
    
  name: string
  static value: string = 'hello typescript' //静态属性需要提前赋值
  constructor(name: string) {
    
    
    this.name = name
  }
  static say() {
    
    
    return this.name
  }
  static run() {
    
    
    return 'run' + this.say() //静态方法可以通过this调用另外一个静态方法
  }
}
// 调用静态属性和静态方法
console.log(Person.value)
console.log(Person.say())

TS通过 interface 定义类

类中定义变量和方法，interface 关键字也可以用来定义变量和方法。

// 通过接口定义类方法，我的理解也就是混合类型的接口
interface IPersonClassOne {
    
    
  name: string,
  say(name: string): string //定义获取名字的方法
}
// 标准定义类的方法
class PersonClassTwo {
    
    
  age: number
  constructor() {
    
    
    this.age = 21
  }
}
// 继承接口使用 implements 关键字，如果有多个接口继承可以使用逗号 ',' 分隔开
// 继承类使用 extends 关键字
// 继承而来的属性都需要再次声明
class Person extends PersonClassTwo implements IPersonClassOne {
    
    
  name: string 
  age: number
  other: string
  constructor(){
    
    
    super()
    this.other = 'supplementary instruction...'
  }
  say(name: string){
    
    
    this.name = name
    return this.name + '|' + this.age + ', ' + this.other
  }
}
// 实例化类
let per = new Person()
console.log(per.say('xinz')) //xinz|21, supplementary instruction...

TS抽象类

抽象类就是来包裹抽象方法的一个类；抽象方法指那些只有功能声明，但没有功能主体的方法。

也就是说抽象类是包裹那些从多个事物中将相同的内容的本质抽离出来的方法，该方法不提供具体细节，就只是一个概念。

就比如每个动物发出的声音都不一样，但是它们都能发出声音，因此就可以定义一个抽象类，包裹发出声音这一功能，但是不用去具体实现发出的是什么声音的细节，这就是抽象类。

只有当具体的子类去继承了该抽象类，才能按照个人自定义的想法去实现抽象功能的细节。
通过关键字** abstract **定义抽象类，需要注意的是抽象方法具体功能只能在子类(派生类)中实现。

// 定义抽象类 和 抽象方法, 都需要在类和方法前面加关键字 abstract
abstract class sounds {
    
    
  constructor(){
    
    }
  abstract say(): string
}
// 子类实现抽象方法的具体功能
class Dog extends sounds {
    
    
  constructor(){
    
    
    super() //super() 将继承的父类拿到子类里面，之后就可以通过this访问了
  }
  say(): string {
    
    
    return 'wang wang !!!'
  }
}
class Cat extends sounds {
    
    
  constructor(){
    
    
    super()
  }
  say(): string {
    
    
    return 'miao miao !!!'
  }
}
// 执行抽象方法 只能通过子类来执行
let dog = new Dog()
let cat = new Cat()
console.log(dog.say()) //wang wang !!!
console.log(cat.say()) //miao miao !!!