TypeScript 类全面解析：从基础到高级应用-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00081/article/details/148464513

TypeScript 类全面解析：从基础到高级应用

TypeScript TypeScript 使用手册（中文版）翻译。http://www.typescriptlang.org 项目地址: https://gitcode.com/gh_mirrors/typ/TypeScript

前言

TypeScript 作为 JavaScript 的超集，为开发者提供了完整的面向对象编程能力。本文将深入探讨 TypeScript 中类的各种特性和使用场景，帮助开发者更好地利用类来构建健壮的应用程序。

类的基本概念

在 TypeScript 中，类是一种创建对象的模板，它封装了数据和行为。与传统的 JavaScript 基于原型的继承不同，TypeScript 提供了基于类的面向对象编程方式。

基本类示例

class Person {
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }
  
  greet() {
    return `Hello, ${this.name}!`;
  }
}

const person = new Person("Alice");
console.log(person.greet()); // 输出: Hello, Alice!

这个简单的 Person 类展示了 TypeScript 类的基本结构：

name 是类的属性
constructor 是构造函数，在创建实例时调用
greet 是类的方法

继承与多态

TypeScript 支持类的继承，这是面向对象编程的重要特性之一。

继承基础

class Animal {
  move(distance: number = 0) {
    console.log(`Animal moved ${distance}m.`);
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof! Woof!");
  }
}

const dog = new Dog();
dog.bark();  // Woof! Woof!
dog.move(10); // Animal moved 10m.

方法重写

子类可以重写父类的方法以实现多态：

class Bird extends Animal {
  move(distance = 5) {
    console.log("Flying...");
    super.move(distance);
  }
}

const bird = new Bird();
bird.move(); // Flying... \n Animal moved 5m.

重要规则：

子类构造函数必须调用 super()
在访问 this 前必须先调用 super()

访问修饰符

TypeScript 提供了三种访问修饰符来控制类成员的可见性：

1. public（默认）

所有成员默认都是 public，可以在任何地方访问。

2. private

私有成员只能在类内部访问：

class Employee {
  private secretCode: string;
  
  constructor(code: string) {
    this.secretCode = code;
  }
}

const emp = new Employee("123");
console.log(emp.secretCode); // 错误: secretCode 是私有的

3. protected

受保护成员可以在类和其子类中访问：

class Person {
  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;
  }
  
  getDetails() {
    return `Name: ${this.name}, Dept: ${this.department}`;
  }
}

只读属性与参数属性

readonly 修饰符

class Circle {
  readonly PI = 3.14;
  readonly radius: number;
  
  constructor(radius: number) {
    this.radius = radius;
  }
}

const circle = new Circle(5);
circle.radius = 10; // 错误: radius 是只读的

参数属性

简化属性声明和赋值的语法：

class Animal {
  constructor(private name: string) {}
  
  getName() {
    return this.name;
  }
}

存取器（Getters/Setters）

TypeScript 支持通过 getters 和 setters 来控制对对象成员的访问：

class Temperature {
  private _celsius: number = 0;
  
  get celsius(): number {
    return this._celsius;
  }
  
  set celsius(value: number) {
    if (value < -273.15) {
      throw new Error("Temperature below absolute zero!");
    }
    this._celsius = value;
  }
  
  get fahrenheit(): number {
    return this._celsius * 9/5 + 32;
  }
}

静态成员

静态成员属于类本身，而不是类的实例：

class MathHelper {
  static PI = 3.1415926;
  
  static calculateCircleArea(radius: number): number {
    return this.PI * radius * radius;
  }
}

console.log(MathHelper.calculateCircleArea(5));

抽象类

抽象类作为其他类的基类，不能直接实例化：

abstract class Shape {
  abstract getArea(): number;
  
  printArea(): void {
    console.log(`Area: ${this.getArea()}`);
  }
}

class Circle extends Shape {
  constructor(private radius: number) {
    super();
  }
  
  getArea(): number {
    return Math.PI * this.radius * this.radius;
  }
}

高级技巧

类作为接口

TypeScript 的类定义实际上会创建两种类型：

实例类型
构造函数类型

这使得类可以用作接口：

class Point {
  x: number;
  y: number;
}

interface Point3D extends Point {
  z: number;
}

const point: Point3D = { x: 1, y: 2, z: 3 };

构造函数类型

class Greeter {
  static standardGreeting = "Hello";
  greeting?: string;
  
  greet() {
    return this.greeting || Greeter.standardGreeting;
  }
}

let greeterMaker: typeof Greeter = Greeter;
greeterMaker.standardGreeting = "Hey";

const greeter2: Greeter = new greeterMaker();
console.log(greeter2.greet()); // "Hey"