• 1. 类介绍
• 2. 基本示例
• 3. 继承
  • 更复杂的继承示例
• 4. 公共，私有与受保护的修饰符
  • 默认为 public
  • 理解 private
  • 理解 protected
  • protected 构造函数
• 5. readonly 修饰符
  • 参数属性
• 6. 存取器
• 7. 静态属性
• 8. 抽象类
• 9. 高级技巧
  • 构造函数
  • 把类当作接口使用

1. 类介绍

在传统的 JavaScript 程序中，我们使用函数和基于原型的继承来创建可重用的组件。对于习惯于面向对象编程的开发者来说，这种语法可能有些陌生，因为他们习惯于使用基于类的继承，并且对象是由类构建出来的。从 ECMAScript 2015（ES6）开始，JavaScript 支持基于类的面向对象编程方式。TypeScript 提供了对这些特性的支持，即使在不支持 ES6 的环境中，也可以通过编译后代码来实现这些功能。

2. 基本示例

以下是一个使用类的基本示例：

class Greeter {
    // 定义一个属性 greeting
    greeting: string;

    // 构造函数，接受一个参数 message
    constructor(message: string) {
        this.greeting = message;
    }

    // 定义一个方法 greet
    greet() {
        return 'Hello, ' + this.greeting;
    }
}

// 使用 new 关键字创建 Greeter 类的一个实例
let greeter = new Greeter('world');

在这个例子中，我们定义了一个 Greeter 类。这个类有三个成员：一个名为 greeting 的属性，一个构造函数和一个名为 greet 的方法。在引用任何一个类成员时，我们使用 this 关键字，它指向类的当前实例。

最后一行代码使用 new 关键字创建了 Greeter 类的一个实例。这会调用类的构造函数，创建一个新的 Greeter 对象，并初始化它。

3. 继承

TypeScript 支持类的继承，允许我们通过扩展现有类来创建新的类。继承是一种面向对象编程的基本模式。

下面是一个简单的继承示例：

class Animal {
    // 定义一个方法 move，接受一个参数 distance，默认为 0
    move(distance: number = 0) {
        console.log(`Animal moved ${distance}m.`);
    }
}

// Dog 类继承自 Animal 类
class Dog extends Animal {
    // 定义一个方法 bark
    bark() {
        console.log('Woof! Woof!');
    }
}

// 创建 Dog 类的一个实例
const dog = new Dog();
dog.bark();  // 输出 "Woof! Woof!"
dog.move(10);  // 输出 "Animal moved 10m."

在这个例子中，Dog 类继承自 Animal 类，这意味着 Dog 类可以访问 Animal 类的所有属性和方法。Dog 是一个派生类，它从 Animal 基类继承，通过 extends 关键字实现继承。

更复杂的继承示例

下面是一个更复杂的继承示例：

class Animal {
    // 定义一个属性 name
    name: string;

    // 构造函数，接受一个参数 name
    constructor(name: string) {
        this.name = name;
    }

    // 定义一个方法 move，接受一个参数 distance，默认为 0
    move(distance: number = 0) {
        console.log(`${this.name} moved ${distance}m.`);
    }
}

// Snake 类继承自 Animal 类
class Snake extends Animal {
    // 构造函数，接受一个参数 name
    constructor(name: string) {
        // 调用基类的构造函数
        super(name);
    }

    // 重写 move 方法
    move(distance: number = 5) {
        console.log('Slithering...');
        super.move(distance);  // 调用基类的 move 方法
    }
}

// Horse 类继承自 Animal 类
class Horse extends Animal {
    // 构造函数，接受一个参数 name
    constructor(name: string) {
        // 调用基类的构造函数
        super(name);
    }

    // 重写 move 方法
    move(distance: number = 45) {
        console.log('Galloping...');
        super.move(distance);  // 调用基类的 move 方法
    }
}

// 创建 Snake 类的一个实例
let sam = new Snake('Sammy');
// 创建 Horse 类的一个实例，并将其类型声明为 Animal
let tom: Animal = new Horse('Tommy');

sam.move();  // 输出 "Slithering... Sammy moved 5m."
tom.move(34);  // 输出 "Galloping... Tommy moved 34m."

在这个示例中，我们创建了 Animal 的两个子类：Snake 和 Horse。这两个子类都有一个构造函数，并且都重写了 Animal 类的 move 方法。

• 在派生类中，构造函数必须调用 super()，它会执行基类的构造函数。在构造函数中访问 this 之前必须调用 super()，这是 TypeScript 强制执行的规则。
• 派生类可以重写基类的方法。在调用 super.move(distance) 时，会调用基类的 move 方法。

尽管 tom 的类型被声明为 Animal，但它的值是 Horse，因此调用 tom.move(34) 时，会调用 Horse 类中重写的 move 方法。

Slithering...
Sammy moved 5m.
Galloping...
Tommy moved 34m.

通过继承，TypeScript 提供了一种简洁的方式来扩展和重用代码，同时支持多态和方法重写，使代码结构更清晰且更具维护性。

4. 公共，私有与受保护的修饰符

在 TypeScript 中，我们可以使用访问修饰符来控制类中成员的可访问性。TypeScript 提供了三种主要的修饰符：public、private 和 protected。

默认为 public

在 TypeScript 中，类中的成员默认是 public 的，这意味着可以在任何地方访问到这些成员。如果你熟悉其他语言（如 C# 或 Java），你可能知道这些语言需要显式地使用 public 来声明公有成员。在 TypeScript 中，你可以选择性地使用 public 来标记成员以提高代码可读性，但它不是必需的。

class Animal {
    // 使用 public 修饰符，表示该成员是公有的
    public name: string;

    // 构造函数
    public constructor(name: string) {
        this.name = name;
    }

    // 方法 move，接受一个参数 distance
    public move(distance: number) {
        console.log(`${this.name} moved ${distance}m.`);
    }
}

理解 private

private 修饰符用于将类的成员标记为私有的，这意味着它们不能在声明它的类的外部访问。

class Animal {
    // 使用 private 修饰符，表示该成员是私有的
    private name: string;

    // 构造函数
    constructor(name: string) {
        this.name = name;
    }
}

let cat = new Animal('Cat');
console.log(cat.name); // 错误: 'name' 是私有的.

在上面的示例中，name 成员被标记为 private，因此不能在 Animal 类外部访问。

理解 protected

protected 修饰符与 private 类似，但有一点不同：protected 成员在派生类中仍然可以访问。

class Person {
    // 使用 protected 修饰符，表示该成员在派生类中可访问
    protected name: string;

    // 构造函数
    constructor(name: string) {
        this.name = name;
    }
}

class Employee extends Person {
    private department: string;

    // 构造函数
    constructor(name: string, department: string) {
        super(name); // 调用基类的构造函数
        this.department = department;
    }

    // 方法 getElevatorPitch，返回一个字符串
    getElevatorPitch() {
        return `Hello, my name is ${this.name} and I work in ${this.department}.`;
    }
}

let howard = new Employee('Howard', 'Sales');
console.log(howard.getElevatorPitch()); // OK
console.log(howard.name); // 错误: 'name' 是受保护的，不能在类的外部访问。

在上面的示例中，name 成员被标记为 protected，这意味着可以在 Employee 类中访问，但不能在 Employee 类的实例中直接访问。

protected 构造函数

构造函数也可以被标记为 protected，这意味着类不能在包含它的类的外部被实例化，但可以被继承。

class Person {
    // 使用 protected 修饰符，表示构造函数在派生类中可调用
    protected name: string;

    // 使用 protected 修饰符，表示构造函数在派生类中可调用
    protected constructor(name: string) {
        this.name = name;
    }
}

class Employee extends Person {
    private department: string;

    // 构造函数
    constructor(name: string, department: string) {
        super(name); // 调用基类的构造函数
        this.department = department;
    }

    // 方法 getElevatorPitch，返回一个字符串
    public getElevatorPitch() {
        return `Hello, my name is ${this.name} and I work in ${this.department}.`;
    }
}

let howard = new Employee('Howard', 'Sales'); // OK
let john = new Person('John'); // 错误: 'Person' 的构造函数是被保护的，不能直接实例化。

在这个例子中，Person 类的构造函数被标记为 protected，因此不能直接实例化 Person 类，但可以通过继承来创建 Employee 类的实例。

5. readonly 修饰符

readonly 修饰符用于将类的属性设置为只读的。只读属性只能在声明时或构造函数中被赋值，之后无法修改。

class Person {
    // 使用 readonly 修饰符，表示该属性是只读的
    readonly name: string;

    // 构造函数
    constructor(name: string) {
        this.name = name; // 在构造函数中初始化只读属性
    }
}

let john = new Person('John');
john.name = 'Peter'; // 错误: 'name' 是只读属性，不能被修改。

参数属性

参数属性是一种简洁的语法，用于在构造函数中同时声明和初始化成员。可以在构造函数参数前添加 private、protected、public 或 readonly 修饰符，将其作为类的成员。

class Person {
    // 构造函数，使用参数属性声明和初始化 name 成员
    constructor(readonly name: string) {}
}

let john = new Person('John');
console.log(john.name); // OK
john.name = 'Peter'; // 错误: 'name' 是只读属性，不能被修改。

在这个例子中，readonly name: string 参数属性在构造函数中声明并初始化 name 成员。这种方式可以减少冗余代码，使得代码更简洁明了。

通过使用访问修饰符和 readonly 修饰符，TypeScript 提供了更强大的访问控制机制，使得代码更加安全、可维护和可读。

6. 存取器

TypeScript 支持通过 getters/setters 来截取对对象成员的访问。它能帮助你有效地控制对对象成员的访问权限。通过使用存取器，可以在读取或写入属性时加入额外的逻辑。

下面是一个简单的类使用 get 和 set 存取器的例子。

首先，我们从一个没有使用存取器的例子开始：

class Employee {
    fullName: string;
}

// 创建一个 Employee 类的实例
let employee = new Employee();
// 设置 fullName 属性
employee.fullName = 'Bob Smith';
// 判断 fullName 是否存在
if (employee.fullName) {
    console.log(employee.fullName);
}

在上面的例子中，我们可以直接访问和修改 fullName 属性，因为它是 public 的。有时候我们希望在设置属性时触发一些额外逻辑，这时存取器就派上用场了。

下面的版本中，我们先检查用户密码是否正确，然后再允许其修改员工信息。我们把对 fullName 的直接访问改成了可以检查密码的 set 方法。我们也加了一个 get 方法，让上面的例子仍然可以工作：

// 密码
let passcode = 'secret passcode';

class Employee {
    // 私有属性 _fullName，用于存储员工姓名
    private _fullName: string;

    // 访问器 getter，用于获取 fullName 的值
    get fullName(): string {
        return this._fullName;
    }

    // 访问器 setter，用于设置 fullName 的值
    set fullName(newName: string) {
        // 检查密码是否正确
        if (passcode && passcode === 'secret passcode') {
            this._fullName = newName;
        } else {
            console.log('Error: Unauthorized update of employee!');
        }
    }
}

// 创建一个 Employee 类的实例
let employee = new Employee();
// 设置 fullName 属性
employee.fullName = 'Bob Smith';
// 判断 fullName 是否存在
if (employee.fullName) {
    console.log(employee.fullName);
}

在这个例子中，set 存取器会在设置 fullName 时检查密码，如果密码正确，则允许更新 fullName。如果密码不正确，则输出错误信息。get 存取器则用于获取 fullName 的值。

对于存取器，有下面几点需要注意的：

1. 存取器要求编译器将目标设为 ECMAScript 5 或更高版本。不支持降级到 ECMAScript 3。
2. 只带有 get 不带有 set 的存取器会被推断为 readonly。在生成 .d.ts 文件时很有用，因为利用这个属性的用户会看到不允许改变它的值。

7. 静态属性

到目前为止，我们讨论的都是类的实例成员，这些成员在类被实例化时被初始化。我们还可以创建类的静态成员，这些属性存在于类本身上面，而不是类的实例上。

在下面的例子中，我们使用 static 关键字定义了 origin，因为它是所有网格都会用到的属性。每个实例想要访问这个属性时，都要在 origin 前面加上类名。类似于实例属性使用 this.xxx 访问，这里我们使用 Grid.origin 来访问静态属性。

class Grid {
    // 静态属性 origin，表示坐标原点
    static origin = { x: 0, y: 0 };

    // 实例属性 scale，表示缩放比例
    scale: number;

    // 构造函数，初始化 scale
    constructor(scale: number) {
        this.scale = scale;
    }

    // 方法 calculateDistanceFromOrigin，计算从原点到某个点的距离
    calculateDistanceFromOrigin(point: { x: number; y: number }) {
        let xDist = point.x - Grid.origin.x; // 使用 Grid.origin 访问静态属性
        let yDist = point.y - Grid.origin.y;
        return Math.sqrt(xDist * xDist + yDist * yDist) * this.scale;
    }
}

// 创建两个 Grid 类的实例
let grid1 = new Grid(1.0);  // 1 倍缩放
let grid2 = new Grid(5.0);  // 5 倍缩放

// 计算并输出距离
console.log(grid1.calculateDistanceFromOrigin({ x: 3, y: 4 }));
console.log(grid2.calculateDistanceFromOrigin({ x: 3, y: 4 }));

在这个例子中，origin 是 Grid 类的静态属性。它表示坐标系的原点，所有 Grid 实例共享这个属性。在 calculateDistanceFromOrigin 方法中，我们使用 Grid.origin 来访问这个静态属性。

8. 抽象类

抽象类用于作为其它派生类的基类使用。它们不能被直接实例化。不同于接口，抽象类可以包含实现细节。abstract 关键字用于定义抽象类和抽象方法。

// 定义抽象类 Animal
abstract class Animal {
    // 抽象方法 makeSound，没有实现
    abstract makeSound(): void;
    
    // 普通方法 move，有实现
    move(): void {
        console.log('roaming the earth...');
    }
}

在上面的例子中，Animal 是一个抽象类，其中包含一个没有实现的抽象方法 makeSound，以及一个普通方法 move。

抽象类中的抽象方法不包含具体实现，必须在派生类中实现。抽象方法的语法与接口方法相似。两者都是定义方法签名但不包含方法体。然而，抽象方法必须包含 abstract 关键字，并且可以包含访问修饰符。

// 定义抽象类 Department
abstract class Department {
    // 成员属性 name
    name: string;

    // 构造函数
    constructor(name: string) {
        this.name = name;
    }

    // 普通方法 printName，有实现
    printName(): void {
        console.log('Department name: ' + this.name);
    }

    // 抽象方法 printMeeting，没有实现，必须在派生类中实现
    abstract printMeeting(): void;
}

// 定义类 AccountingDepartment，继承自 Department
class AccountingDepartment extends Department {
    // 构造函数
    constructor() {
        super('Accounting and Auditing'); // 调用基类的构造函数
    }

    // 实现抽象方法 printMeeting
    printMeeting(): void {
        console.log('The Accounting Department meets each Monday at 10am.');
    }

    // 自定义方法 generateReports
    generateReports(): void {
        console.log('Generating accounting reports...');
    }
}

let department: Department; // 允许创建一个对抽象类型的引用
department = new Department(); // 错误: 不能创建一个抽象类的实例
department = new AccountingDepartment(); // 允许对一个抽象子类进行实例化和赋值
department.printName(); // 输出 "Department name: Accounting and Auditing"
department.printMeeting(); // 输出 "The Accounting Department meets each Monday at 10am."
department.generateReports(); // 错误: 方法在声明的抽象类中不存在

在这个例子中，Department 是一个抽象类，它包含一个普通方法 printName 和一个抽象方法 printMeeting。AccountingDepartment 类继承了 Department，并实现了抽象方法 printMeeting。注意，我们不能直接创建抽象类 Department 的实例。

通过抽象类和抽象方法，TypeScript 提供了强大的面向对象特性，使得代码结构更加清晰，符合实际应用场景的需求。抽象类提供了一种强约束机制，可以用于定义类之间的继承关系和接口契约。

9. 高级技巧

构造函数

当你在 TypeScript 中声明一个类时，实际上同时声明了多个东西。首先是类的实例的类型。

class Greeter {
    // 静态属性 standardGreeting，表示标准问候语
    static standardGreeting = 'Hello, there';

    // 实例属性 greeting，用于存储问候语
    greeting: string;

    // 构造函数，初始化 greeting
    constructor(message: string) {
        this.greeting = message;
    }

    // 方法 greet，返回问候语
    greet() {
        return 'Hello, ' + this.greeting;
    }
}

// 声明 greeter 类型为 Greeter
let greeter: Greeter;
// 创建 Greeter 类的实例
greeter = new Greeter('world');
// 输出问候语
console.log(greeter.greet());

在上面的代码中，我们写了 let greeter: Greeter，意思是 Greeter 类的实例的类型是 Greeter。对于使用过其它面向对象语言的程序员来说，这已经是常规操作。

我们还创建了一个叫做 构造函数的值。这个函数会在我们使用 new 关键字创建类实例时被调用。下面是上面的代码被编译成 JavaScript 后的样子：

var Greeter = /** @class */ (function () {
    // 构造函数
    function Greeter(message) {
        this.greeting = message;
    }

    // greet 方法
    Greeter.prototype.greet = function () {
        return 'Hello, ' + this.greeting;
    };

    // 静态属性 standardGreeting
    Greeter.standardGreeting = 'Hello, there';
    return Greeter;
}());

// 声明 greeter
var greeter;

// 创建 Greeter 类的实例
greeter = new Greeter('world');

// 输出问候语
console.log(greeter.greet());

在上面的代码中，var Greeter 被赋值为构造函数。当我们调用 new 并执行这个函数后，就会得到一个类的实例。这个构造函数也包含了类的所有静态属性。可以认为类具有 实例部分 和 静态部分 这两个部分。

让我们稍微改写一下这个例子，看看它们之间的区别：

class Greeter {
    // 静态属性 standardGreeting
    static standardGreeting = 'Hello, there';

    // 实例属性 greeting
    greeting: string;

    // 构造函数，带有可选参数 message
    constructor(message?: string) {
        this.greeting = message;
    }

    // 方法 greet，返回问候语
    greet() {
        if (this.greeting) {
            return 'Hello, ' + this.greeting;
        } else {
            return Greeter.standardGreeting;
        }
    }
}

// 声明 greeter 类型为 Greeter
let greeter: Greeter;
// 创建 Greeter 类的实例
greeter = new Greeter();
// 输出问候语
console.log(greeter.greet());

// 使用 typeof 获取 Greeter 的类型
let greeterMaker: typeof Greeter = Greeter;
// 修改静态属性 standardGreeting
greeterMaker.standardGreeting = 'Hey there';

// 使用 greeterMaker 创建 Greeter 类的实例
let greeter2: Greeter = new greeterMaker();
// 输出问候语
console.log(greeter2.greet());

在这个例子中，greeter1 与我们之前看到的一样。我们实例化 Greeter 类，并使用这个对象。greeter2 是通过 greeterMaker 创建的，它引用了 Greeter 类。我们使用 typeof Greeter 获取 Greeter 的类型，这意味着我们获取了 Greeter 类构造函数的类型。这种类型包含了类的所有静态成员和构造函数。

通过 greeterMaker 修改了静态属性 standardGreeting，因此 greeter2 的 greet 方法返回的问候语也发生了变化。

把类当作接口使用

如上一节所讲，类定义会创建两个东西：类的实例类型和一个构造函数。因为类可以创建出类型，所以你可以在允许使用接口的地方使用类。

// 定义类 Point
class Point {
    x: number;
    y: number;
}

// 定义接口 Point3d，继承自 Point
interface Point3d extends Point {
    z: number;
}

// 定义 point3d 对象
let point3d: Point3d = { x: 1, y: 2, z: 3 };

在上面的例子中，Point 类定义了 x 和 y 属性，而 Point3d 接口继承了 Point 类，并增加了一个 z 属性。这样，point3d 对象就可以使用 Point3d 类型。

通过把类当作接口使用，我们可以更灵活地组合类型和类的成员，从而创建出更复杂的类型定义。这样可以在编写代码时提高代码的重用性和可维护性。

总结：

1. 构造函数与类的静态成员：

   • 构造函数的类型可以通过 typeof 获取，包含了类的静态成员和构造函数。
   • 类可以分为 实例部分 和 静态部分。

2. 把类当作接口使用：

   • 类可以用作接口，允许继承类的成员。
   • 类的实例类型可以与接口结合，创建更复杂的类型定义。

这种高级技巧在实际项目中可以提升代码的组织和可扩展性，使得代码更加灵活和易于维护。