Typescript 中的类

在ts中, 你可以对类进行约束, 在构造子类时遵循这些约束即可

目录

1. 定义一个普通的类

2. 类的继承

3. 共有私有修饰符

4. readonly修饰符

         5. 存取器

         6. 静态属性

         7. 抽象类

8.接口继承类

---

1. 定义一个普通的类

对类约束使用类型注解就可以了, 对类不约束就和普通js中定义类的写法一样

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

class Person1 {
  name = '123'
  console() {
    return this.name
  }
}

const p1 = new Person('yjw')
console.log(p1.name) // yjw
console.log(p1.console()) // yjw

const p2 = new Person1()
console.log(p2.name) // 123
console.log(p2.console()) // 123

2. 类的继承

类可以继承于另一个父类, 继承父类的属性和方法, 继承者必须调用super执行父类的构造函数 . 

class Fat {
  money: number
  constructor(num: number) {
    this.money = num
  }
}

class Son extends Fat {
  book: string
  constructor(num: number, name: string) {
    super(num)
    this.book = name
  }
}

const child = new Son(1000, '西游记')

console.log(child) // { money: 1000, book: '西游记' }

3. 共有私有修饰符

默认情况下, 类中的成员都是公有的, 你可以在类的实例或者子类上都可访问父类的成员, 但是你也可以通过修饰符来限制类中的成员被外部访问

修饰符	作用
public	共有成员
private	私有成员, 只能在私有成员所在的类中进行访问
protected	受保护的成员, 子类和其所在类中能够访问

 

class Person {
  public name: string
  protected age: number
  public sex: string
  private weight: number
  getWeight() {
    return this.weight
  }
  getAge() {
    return this.age
  }
  constructor(name: string, age: number, sex: string, weight: number) {
    this.name = name
    this.age = age
    this.sex = sex
    this.weight = weight
  }
}

const p = new Person('zs', 100, '男', 200)
console.log(p.name) // zs
// console.log(p.age) // 报错 属性“age”受保护，只能在类“Person”及其子类中访问。
console.log(p.getAge()) // 100
console.log(p.sex) // 男
// console.log(p.weight) // 报错 属性“weight”为私有属性，只能在类“Person”中访问。
console.log(p.getWeight()) // 200

4. readonly修饰符

类中的成员可以通过 readonly 修饰符设置为只读成员, 只能读取不能修改

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

const p = new Fat('zs')
// p.name = 'ls' // 报错 无法分配到 "name" ，因为它是只读属性
console.log(p.name)

5. 存取器

类中的私有成员只能在其所在的类中进行访问, 读取器可以让你做到在类的实例进行访问及修改, get 关键字定义函数可读属性, set关键字定义函数可改属性, 只定义get时, 属性只读

// 定义了一个私有属性 _name
// 外部想要读取的话需要依赖类内的读取器或者方法
class P {
  private _name: string
  constructor(name: string) {
    this._name = name
  }
  get name() {
    return this._name
  }
  set name(res: string) {
    this._name = res
  }
}

const p = new P('nnn')
console.log(p.name) // nnn
p.name = 'aaa'
console.log(p.name) // aaa

6. 静态属性

和js中的类一样, 定义静态属性使用关键字 static, 静态属性只能类本身访问, 如果你想在类的实例上访问请在类中定义相应的方法, 类的静态属性默认可改, 设置不可改同样通过关键字readonly

class P {
  static readonly address = 'xxxxxx'
  getAddress() {
    return P.address
  }
}
console.log(P.address) // 'xxxxxx'
const p = new P()
console.log(p.getAddress()) // 'xxxxxx'
// P.address = '333333' // 报错 无法分配到 "address" ，因为它是只读属性。

7. 抽象类

抽象类用作其他类的父类(基类), 不能被实例化, 用来被继承 , 抽象类定义的抽象方法派生类必须实现它, 定义抽象类和抽象方法的关键字一样是 abstract 

// 定义了一个抽象类
abstract class Demo {
  name: string
  constructor(name: string) {
    this.name = name
  }
  abstract sing(res: 1): number // 定义了一个抽象方法 使用了类型推断
}

// Demo 的派生类 Son 必须实现 Demo 中的抽象方法 sing()
class Son extends Demo {
  age: number
  constructor(name: string, age: number) {
    super(name)
    this.age = age
  }
  sing(res: number): number {
    return res
  }
}

const p = new Son('zs', 10)
console.log(p.name)
console.log(p.age)
console.log(p.sing(1123))

8.接口继承类

接口可以继承类的属性及约束, 使用接口作为类型定义变量时必须遵循这些约束

class D {
  x: number
  y: number
  jump() {}
}
interface Pos extends D {
  z: number
}

const obj: Pos = {
  x: 1,
  y: 1,
  z: 1,
  jump: function () {},
}