当前位置：首页 > news >正文

【TS学习】（19）TS中的类

news 来源：原创 2025/5/14 6:20:10

在 TypeScript 中，类（Class） 是面向对象编程的核心结构，用于封装数据和行为。TypeScript 的类继承了 JavaScript 的类特性，并增加了类型系统和高级功能的支持（如访问修饰符、存取器和装饰器）。

1. 属性

(1) 定义

属性是类中存储数据的变量。
可以使用类型注解为属性指定类型。

(2) 示例

class User {
  name: string;
  age: number;

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

const user = new User("Alice", 30);
console.log(user.name); // 输出 "Alice"

在这里：

name 和 age 是类的属性，分别表示用户的姓名和年龄。

2. 构造函数

(1) 定义

构造函数是一个特殊的方法，用于初始化类的实例。
使用 constructor 关键字定义。

(2) 简化语法

TypeScript 支持直接在构造函数参数中声明并初始化属性。

示例

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

const user = new User("Alice", 30);
console.log(user.name, user.age); // 输出 "Alice 30"

在这里：

public 修饰符自动将构造函数参数声明为类的属性。

3. 方法

(1) 定义

方法是类中定义的函数，用于实现特定的行为。
方法可以通过 this 访问类的属性和其他方法。

示例

class User {
  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}. I am ${this.age} years old.`);
  }
}

const user = new User("Alice", 30);
user.greet(); // 输出 "Hello, my name is Alice. I am 30 years old."

在这里：

greet 是一个方法，用于打印用户信息。

4. 存取器（Accessors）

(1) 定义

存取器是一种特殊的属性，允许通过 get 和 set 方法控制对某个属性的访问和修改。
存取器提供了封装和验证的能力。

示例

class User {
  private _age: number;

  constructor(age: number) {
    this._age = age;
  }

  // Getter
  get age(): number {
    return this._age;
  }

  // Setter
  set age(value: number) {
    if (value < 0) {
      throw new Error("Age cannot be negative");
    }
    this._age = value;
  }
}

const user = new User(30);
console.log(user.age); // 输出 30

user.age = 25; // 设置新的值
console.log(user.age); // 输出 25

// user.age = -5; // 报错：Age cannot be negative

在这里：

_age 是私有属性，外部无法直接访问。
get age() 和 set age(value) 提供了对 _age 的安全访问和修改。

5. 访问修饰符

(1) 定义

访问修饰符用于控制类成员的可见性。
TypeScript 提供了三种访问修饰符：public、private 和 protected。

(2) 常见修饰符

public：默认修饰符，成员可以在任何地方访问。
private：成员只能在类内部访问。
protected：成员可以在类内部和子类中访问。

示例

class User {
  public name: string; // 公有属性
  private _age: number; // 私有属性
  protected role: string; // 受保护属性

  constructor(name: string, age: number, role: string) {
    this.name = name;
    this._age = age;
    this.role = role;
  }

  public getAge(): number {
    return this._age;
  }

  protected getRole(): string {
    return this.role;
  }
}

class Admin extends User {
  override getRole(): string {
    return `Admin: ${super.getRole()}`;
  }
}

const admin = new Admin("Alice", 30, "Super Admin");
console.log(admin.name); // 输出 "Alice"
console.log(admin.getAge()); // 输出 30
console.log(admin.getRole()); // 报错：'getRole' 是受保护方法

在这里：

name 是公有属性，外部可以直接访问。
_age 是私有属性，外部无法直接访问。
role 是受保护属性，只有子类可以访问。

6. 装饰器（Decorators）

(1) 定义

装饰器是一种特殊的功能，用于在类或类成员上添加元数据或修改其行为。
装饰器通常用于框架开发（如 Angular）或元编程场景。

(2) 启用装饰器

需要在 tsconfig.json 中启用实验性装饰器支持：

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

示例

以下是一个简单的装饰器示例：

示例 1：类装饰器

function logClass(target: Function) {
  console.log(`Class ${target.name} has been defined.`);
}

@logClass
class User {
  name: string;

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

const user = new User("Alice"); // 输出 "Class User has been defined."

示例 2：方法装饰器

function logMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Calling method '${propertyKey}' with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };
}

class Calculator {
  @logMethod
  add(a: number, b: number): number {
    return a + b;
  }
}

const calculator = new Calculator();
console.log(calculator.add(2, 3));
// 输出：
// Calling method 'add' with arguments: 2,3
// 5

在这里：

@logClass 是一个类装饰器，用于记录类的定义。
@logMethod 是一个方法装饰器，用于记录方法调用及其参数。

7. 总结

特性	描述
属性	用于存储数据，支持类型注解。
构造函数	用于初始化类的实例，支持简化语法。
方法	用于实现行为，可以通过 `this` 访问类的属性和其他方法。
存取器	提供对属性的安全访问和修改，支持封装和验证逻辑。
访问修饰符	控制类成员的可见性（`public`、`private`、`protected`）。
装饰器	用于在类或类成员上添加元数据或修改行为，常用于框架开发。