3.1.1 类的定义与继承

在TypeScript与Vue的结合使用中，虽然Vue.js本身是一个基于对象的JavaScript框架，但TypeScript作为JavaScript的超集，提供了更为严格的类型系统和面向对象编程（OOP）的支持。理解TypeScript中的类定义与继承机制，对于构建可维护、可扩展的大型Vue应用至关重要。本章节将深入探讨TypeScript中类的定义方式、属性与方法的访问控制、以及继承的基本原理与用法。

3.1.1.1 类的定义

在TypeScript中，类是一种强大的面向对象编程结构，它允许我们创建具有属性和方法的对象。类的定义以class关键字开始，后面跟着类名，类体被包含在大括号{}中。类可以包含构造函数（用于初始化新创建的对象）、字段（类的属性）、方法（包括静态方法和实例方法）等。

示例：定义一个简单的类

class Person {
    // 类的属性
    name: string;
    age: number;
    // 构造函数
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    // 实例方法
    greet(): void {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}
// 创建Person类的实例
const person1 = new Person("Alice", 30);
person1.greet(); // 输出: Hello, my name is Alice and I am 30 years old.

3.1.1.2 访问修饰符

TypeScript支持三种访问修饰符来控制类成员（属性、方法）的可见性：public（公开）、protected（受保护）、private（私有）。

• public：成员可以在任何地方被访问，包括类的外部。
• protected：成员只能在类及其子类中被访问。
• private：成员只能在类内部被访问。

示例：使用访问修饰符

class Animal {
    protected name: string;
    private age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age; // 私有属性只能在类内部访问
    }
    public getAge(): number { // 公开方法暴露私有属性
        return this.age;
    }
    protected sayHello(): void {
        console.log(`Hello, my name is ${this.name}.`);
    }
}
class Dog extends Animal {
    constructor(name: string, age: number, breed: string) {
        super(name, age); // 调用父类的构造函数
        // 这里不能访问 this.age，因为它是私有的
        console.log(`This is a ${breed} dog.`);
    }
    // 可以重写受保护的方法
    protected sayHello(): void {
        super.sayHello(); // 调用父类的受保护方法
        console.log("Woof!");
    }
}
const dog = new Dog("Rex", 5, "German Shepherd");
// dog.sayHello(); // 错误，sayHello是受保护的，不能从类外部直接访问
// dog.age; // 错误，age是私有的，不能从类外部访问

3.1.1.3 类的继承

继承是面向对象编程中的一个核心概念，它允许我们基于一个已存在的类（称为基类或父类）来创建一个新类（称为派生类或子类），子类可以继承父类的属性和方法，并可以添加新的属性或覆盖（重写）父类的方法。

在TypeScript中，继承通过extends关键字实现。子类通过super()函数来调用父类的构造函数，如果父类构造函数需要参数，则必须在子类构造函数中提供这些参数。

示例：类的继承

class Vehicle {
    protected brand: string;
    constructor(brand: string) {
        this.brand = brand;
    }
    describe(): void {
        console.log(`This is a ${this.brand} vehicle.`);
    }
}
class Car extends Vehicle {
    private model: string;
    constructor(brand: string, model: string) {
        super(brand); // 调用父类的构造函数
        this.model = model;
    }
    // 重写父类的方法
    describe(): void {
        super.describe(); // 调用父类的describe方法
        console.log(`It is a ${this.model} model.`);
    }
}
const car = new Car("Toyota", "Camry");
car.describe(); // 输出: This is a Toyota vehicle. It is a Camry model.

3.1.1.4 继承与Vue组件

虽然Vue组件本身不是基于传统的类继承模型，但Vue 3通过Composition API引入的setup函数，以及TypeScript的强类型支持，使得我们可以在Vue组件中模拟类的行为，实现属性的封装、方法的组织以及更复杂的逻辑复用。通过组合式API，我们可以将逻辑相关的响应式状态、计算属性、方法等封装在同一个函数内部，这在一定程度上模拟了类的私有和封装特性。

在Vue组件中，虽然没有直接使用extends关键字进行类的继承，但可以通过混合（mixins）、高阶组件（HOCs）、组合式API的复用（如使用ref、reactive、computed等）等方式来实现类似继承的效果，实现代码的复用和逻辑的模块化。

总结

在TypeScript与Vue的结合使用中，类的定义与继承不仅是TypeScript语言特性的重要组成部分，也是构建大型、可维护Vue应用的基础。通过理解类的定义、访问修饰符的作用、以及继承的原理和用法，我们能够更加灵活地运用TypeScript的强大功能，来构建出结构清晰、逻辑分明的Vue应用。同时，我们也需要注意到，在Vue组件中，虽然不直接使用类的继承，但可以通过其他方式（如组合式API、mixins等）来实现类似的效果，以适应Vue框架的特定需求和设计哲学。