TS系列（4）：常用类型之类、抽象类和接口

你好，我是沐爸，欢迎点赞、收藏、评论和关注。

TS系列（1）：TS是什么？如何使用？

TS系列（2）：类型声明、类型推断和类型总览

TS系列（3）：常用类型（详细）

话接上回，今天分享下类、属性修饰符、抽象类和interface（接口）

10.复习类相关知识

本小结复习类相关知识，如果有相关基础可以跳过。

class Person {
    // 属性声明
    name: string
    age: number

    // 构造器
    constructor(name: string, age: number) {
      this.name = name
      this.age = age
    }

    // 方法
    speak() {
        console.log(`我叫：${this.name},今年${this.age}岁`)
    }
}

// Person 实例
const p1 = new Person('张三', 20)

// Student 继承 Person
class Student extends Person {
    grade: string
    // 若 Student 类不要额外属性，Student的构造器可以省略
    constructor(name:string, age: number, grade: string) {
        super(name, age)
        this.grade = grade
    }
    // 重写父类继承的方法
    override speak() {
        console.log(`我是学生，我叫：${this.name},今年${this.age}岁，我在读${this.grade}年级`)
    }
    // 子类自己的方法
    study() {
        console.log(`${this.name}正在努力学习中...`)
    }
}

11.属性修饰符

修饰符	含义	具体规则
public	公开的	可以被：类内部、子类、类外部访问
protected	受保护的	可以被：类内部、子类访问
private	私有的	可以被：类内部访问
readonly	只读属性	属性无法修改

public修饰符

class Person {
    // name写了public修饰符，age没写修饰符，但默认是public修饰符
    public name: string
    age: number
    constructor(name: string, age: number) {
      this.name = name
      this.age = age
    }
    speak() {
        // 类的【内部】可以访问public修饰的name和age
        console.log(`我叫：${this.name},今年${this.age}岁`)
    }
}

const p1 = new Person('张三', 20)
// 类的【外部】可以访问public修饰的属性
console.log(p1.name)

class Student extends Person {
    constructor(name:string, age: number, grade: string) {
        super(name, age)
    }
    study() {
        // 子类可以访问父类中public修饰的：name/age
        console.log(`${this.age}岁的${this.name}正在努力学习中...`)
    }
}

属性的简写形式

简写前

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

简写后

class Person {
  constructor(public name: string, public age: number) {}
}

protected

class Person {
  // name和age是受保护属性，不能在类外部访问，但在【类】和【子类】中访问
  constructor(
    protected name: string,
    protected age: nuber
  ) {}
  // getDetails是受保护方法，不能在类外部访问，但可以在【类】和【子类】中访问
  protected getDetails(): string {
    // 类中能访问受保护的name和age属性
    return `我叫：${this.name},今年${this.age}岁`
  }
  // introduce 是公开方法，类、子类和类外部都能访问
  introduce() {
    // 类中能访问受保护的 getDetails 方法
    console.log(this.getDetails())
  }
}

const p1 = new Person('张三', 20)
// 可以在类外部访问introduce
p1.introduce()

// 以下代码均报错
// p1.getDetails()
// p1.name
// p1.age

class Student extends Person {
  study() {
    console.log(this.getDetails())
    console.log(`${this.name}正在努力学习`)
  }
}

const s2 = new Student('小明', 8)
s1.study()

privated

class Person {
  constructor(
    public name: string,
    public age: number,
    private IDCard: string
  ) { }
  private getPrivateInfo() {
    return `身份证号码为：${this.IDCard}`
  }
  getInfo() {
    return `我叫：${this.name}, 今年刚满${this.age}岁`
  }
  getFullInfo() {
    return this.getInfo() + ', ' + this.getPrivateInfo()
  }
}

const p1 = new Person('小明', 18, '423516200012135569')
p1.name
p1.age
p1.IDCard // Property 'IDCard' is private and only accessible within class 'Person'
console.log(p1.getInfo())
console.log(p1.getFullInfo())
p1.getPrivateInfo() // Property 'getPrivateInfo' is private and only accessible within class 'Person'

readonly 修饰符

class Car {
  constructor(
    public readonly vin: string, // 车辆识别码，只读属性
    public readonly year: number, // 出厂年份，只读属性
    public color: string,
    public sound: string
  ) { }

  // 打印车辆信息
  displayInfo() {
    console.log(`
      识别码：${this.vin},
      出厂年份：${this.year},
      颜色：${this.color},
      音响：${this.sound}
    `)
  }
}

const car = new Car('hdyejdukeikduejuhf', 2018, '黑色', 'Bose音响')
car.displayInfo()

// 修改vin和year都会报错
car.vin = 'hdyejudkisessedkuhi'
car.year = 2000

12.抽象类

• 概述：抽象类是一种无法被实例化的类，专门用来定义类的结构和行为，类中可以写抽象方法，也可以写具体实现。抽象类主要用来为其派生类提供一个基础结构，要求其派生类必须实现其中的抽象方法。
• 简记：抽象类不能实例化，其意义是可以被继承，抽象类里可以有普通方法，也可以有抽象方法。

通过以下场景，理解抽象类：

我们定义一个抽象类package，表示所有包裹的基本结构，任何包裹都具有重量属性weight，包裹都需要计算运费。但不同类型的包裹（如标准速度、特快专递）都有不同的运费计算方式，因此用于计算运费的calculate方法是一个抽象方法，必须由具体的子类来实现。

abstract class Package {
  // 构造方法
  constructor(public weight: number) {}
  // 抽象方法
  abstract calculate(): number
  // 具体方法
  printPackage() {
    console.log(`包裹重量为：${this.weight}kg，运费为：${this.calculate()}元`)
  }
}
class StandardPackage extends Package {
  constructor(
    weight: number,
    public unitPrice: number
  ) { super(weight) }
  calculate(): number {
    return this.weight * this.unitPrice
  }
}

StandardPackage类继承了Package，实现了calculate方法：

class ExpressPackage extends Package {
  constructor(
    weight: number,
    public unitPrice: number,
    public additional: number
  ) { super(weight) }
  calculate(): number {
    if (this.weight > 10) {
      return 10 * this.unitPrice + (this.weight - 10) * this.additional
    } else {
      return this.weight * this.unitPrice
    }
  }
}

const e1 = new ExpressPackage(13, 8, 2)
e1.printPackage()

总结：何时使用抽象类？

1. 定义通用接口：为一组相关的类定义通用的行为（方法或属性）时。
2. 提供基础实现：在抽象类中提供某些方法或为其提供基础实现，这样派生类就可以继承这些实现，
3. 确保关键实现：强制派生类实现一些关键行为。
4. 共享代码和逻辑：当多个类需要共享部分代码时，抽象类可以避免代码重复。

13.interface(接口)

interface是一种定义结构的方式，主要作用是为：类、对象、函数等规定一种契约，这样可以确保代码的一致性和类型安全，但要注意interface只能定义格式，不能包含任何实现！

定义类结构

// PersonInterface接口，用于限制Person类的格式
interface PersonInterface {
    name: string
    age: number
    speak(n: number): void
}

// 定义一个类 Person，实现 PersonInterface 接口
class Person implements PersonInterface {
    constructor(
        public name: string,
        public age: number
    ) { }
    // 实现接口中的 speak 方法，注意实现speak时参数个数可以少于接口中的规定，但不能多。
    speak(n: number): void {
        for (let i = 0; i < n; i++) {
            // 打印出包含名字和年龄的问候语句
            console.log(`你好，我叫${this.name},我的年龄是${this.age}`)
        }
    }
}

// 创建一个 Person 类的实例 p1，传入名字 'tom' 和年龄 18
const p1 = new Person('tom', 18)
p1.speak(3)

定义对象结构

interface User {
  name: string
  readonly gender: string // 只读属性
  age?: number // 可选属性
  run: (n: number) => void
}

const user: User = {
  name: '张三',
  gender: '男',
  age: 18,
  run(n) {
    console.log(`奔跑了${n}米`)
  }
}

定义函数结构

interface CountInterface {
  (a: number, b: number): number
}

const count: CountInterface = (x, y) => {
  return x + y
}

接口之间的继承

一个interface继承另一个interface，从而实现代码的复用。

interface PersonInterface {
  name: string
  age: number
}

interface StudentInterface extends PersonInterface {
  grade: string
}

const stu: StudentInterface = {
  name: 'zhangsan',
  age: 25,
  grade: '高三'
}

接口可合并

interface PersonInterface {
  name: string
  age: number
}

interface PersonInterface {
  gender: string
}

const p: PersonInterface = {
  name: 'zhangsan',
  age: 18,
  gender: '男'
}

总结：何时使用接口？

1. 定义对象的格式：描述数据模型、API响应格式、配置对象...，是开发中用的最多的场景。
2. 类的契约：规定一个类需要实现哪些属性和方法。
3. 自动合并：一般用于扩展第三方库的类型，这种特性在大型项目中可能会用到。

好了，分享结束，谢谢点赞，下期再见。