TS-ES6 class类中应用TS

ES6 class类中应用TS

class类的修饰器

// 类的修饰器：
// public (公共) 允许内外部使用
// protected (受保护的) 允许在内部和继承内使用
// private (私有) 允许在内部使用，但不能在继承中使用

// 类的内部和外部，{}内属于内部，外面是外部
class Person {
   // public 内外都可以使用，可省略，不写时默认public。 protected只允许内部使用
  name: string // 这里的string注释是TS使用的
  private age: 18
  public sayHello() {
    console.log(this.name + this.age + 'say hello')
  }
}

class Teacher2 extends Person {
  public sayBye() {
    console.log(this.name + ' say bye') // protected 可以在继承中使用到
  }
}

const person = new Person();
person.name = 'test' // 在类的外部定义
console.log(person.name)

class类的构造函数中使用类型校验

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

class Teacher3 extends Person2{
  constructor(public age: number) {
    super('test-name') // 这里传的值是给Person2的构造函数。即使父类没有构造函数，子类的构造函数内也要写super()
  }
}
const teacher3 = new Teacher3(18)
console.log(teacher3.name)
console.log(teacher3.age)

class类的getter、setter和static

class Xjj {
  constructor(private _age: number) { }
  get age() {
    return this._age - 10;
  }  // 访问器属性，以属性的形式访问age，并可以对属性进行包装
  set age(age: number) {
    this._age = age+3;
   }
}

const dj = new Xjj(28);
dj.age = 25

console.log(dj.age)


// 静态属性 static。  静态属性指不需要通过实例化，直接通过Girl.prop的方式就可以访问到属性
class Girl {
  static sayLove() {
    return 'I love you'
  }
}

// const girl = new Girl()
console.log(Girl.sayLove())

class类的只读属性

// 只读属性
class Person {
  public readonly _name: string // 只读属性
  constructor(name: string) {
    this._name = name;
  }
}

const person = new Person('testName');
// person._name = '222'; // 不能修改只读属性
console.log(person._name)

抽象类

/ 抽象类
abstract class Girls {
  abstract skill(); // 注意这里只是定义抽象方法，而不具有方法的实现
}

class Waiter extends Girls{ // 继承了抽象类之后要 实现抽象类内的成员
  skill() {
    console.log('大爷1')
  }
}

class BaseTeacher extends Girls{
  skill() {
    console.log('大爷2')
  }
}

class SeniorTeacher extends Girls{
  skill() {
    console.log('大爷3')
  }
}

// abstract关键字标注为抽象类（没有具体实现，不能用new实例化。子类继承该抽象类必须实现相应方法，用于规范子类）
abstract class Component<T1, T2> {
  props: T1;
  state: T2;

  constructor(props: T1) {
    this.props = props
  }

  // 用abstract标注为抽象类的方法，不能有具体实现
  abstract render(): string
}

// 规范类的props和state
interface Props {
  val: number
}
interface State {
  x: number
}

// 规范类内部的方法
interface Log {
  getInfo(): string
}
interface Save {
  save(): void
}

// <Props, State>通过泛型传入类型. implements 关键字使当前类必须要履行 Log,Storage 接口内定于的契约
class MyComponent extends Component<Props, State> implements Log, Save {
  constructor(props: Props) {
    super(props)
    this.state = {
      x: 1
    }
  }

  render() {
    // this.props.val
    // this.state.x
    return '<MyComponent>'
  }

  getInfo(): string {
    return ''
  }
  save() {

  }
}

const myComponent = new MyComponent({ val: 1 })
myComponent.render()

/**
 * 类中的接口使用implements关键字
 * 1. 如果一个类implements了一个接口，那么就必须实现该接口中定义的契约
 * 2. 多个接口使用逗号分隔
 * 3. implements与extends可以同时存在
 */

/**
 * TS中类和接口知识点
 * 1. 抽象类在编译后会产生实体代码，接口不会
 * 2. TS只支持继承，即一个子类之能有一个父类
 * 3. 接口不能有实现，抽象类可以有属性的实现，没有方法实现
 */