您现在的位置是:首页 >其他 >《五》TypeScript 中类的类型网站首页其他

《五》TypeScript 中类的类型

花铛 2024-10-13 00:01:03
简介《五》TypeScript 中类的类型

在 TypeScript 中,类的属性必须要明确声明,否则会报错。

class Person {
  // 在 TypeScript 中类的属性必须要明确声明,否则会报错
  // 声明属性的同时可以初始化值;或者也可以直接初始化值,此时会默认进行类型推断
  name: string
  age: number = 18
  height = 1.88

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

  eating() {
    console.log(this.name + 'is eating')
  }
}

const p = new Person('Lee', 18, 1.88)
console.log(p.name)

类的成员的修饰符:

在 TypeScript 中,类的属性和方法支持三种修饰符。添加之后,TypeScript 将会检测该成员在哪些地方可见。

  1. public:修饰的是在任何地方可见、公有的属性和方法。public 是默认的修饰符。
  2. private:修饰的是仅在当前类的内部可见的、私有的属性和方法。
  3. protected:修饰的是仅在当前类自身及其子类中可见的、受保护的属性和方法。
class Person {
  private name: string

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

  eating() {
    console.log(this.name + 'is eating') // 正确。可以访问
  }
}

const p = new Person('Lee')
console.log(p.name) // 报错。不可访问

类的只读属性:

在 TypeScript 中,支持类的只读属性 readonly。添加之后,TypeScript 将会检测该属性只可读、不可写。

class Person {
  readonly name: string

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

const p = new Person('Lee')
console.log(p.name) // 正确。可读
p.name = 'Mary' // 报错。不可写

类的参数属性:

在构造函数的参数前面直接添加修饰符,TypeScript 就可以将其转成一个同名同值的类属性,这些就被称为参数属性。

参数属性可以看作是一种语法糖,相当于做了三件事:

  1. 创建一个同名的类属性。
  2. 将值赋值给该类属性。
  3. 声明类属性,且为其添加上修饰符。
class Person {
  constructor(public name: string) {}
}

// 就相当于:
class Person {
  public name: string

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

抽象类:

TypeScript 中支持抽象类和抽象方法,需要使用 abstract 关键字来声明。

对于如果有共同的父类,但是父类中不需要对某些方法进行具体的实现的时候,就可以将其定义为抽象类。抽象方法必须定义在抽象类中,只有方法名,没有方法体。子类必须实现抽象方法。

抽象类不能被实例化。
抽象类中可以包含抽象方法,也可以包含普通的方法。

//定义一个抽象类和抽象方法
abstract class Shape {
  abstract getShape()
}

// 子类继承抽象类
class React extends Shape{
  constructor(public width: number, public height: number) {
    super()
  }

  // 子类实现抽象方法
  getShape() {
    return this.width * this.height
  }
}

// 子类继承抽象类
class circle extends Shape{
  constructor(public radius: number) {
    super()
  }

  // 子类实现抽象方法
  getShape() {
    return 2 * Math.PI * this.radius
  }
}

// 此处的 Shape,相当于父类的引用指向子类的对象,这就叫做多态
function calcArea(shape: Shape) {
  return shape.getShape()
}
console.log(calcArea(new React(10, 20)))
console.log(calcArea(new circle(10)))
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。