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

对 TypeScript 中类是怎么理解的？都有哪些应用场景？

news 2024/11/23 4:30:42

在 TypeScript 中，类（class）是面向对象编程的核心构造之一，它允许你创建具有特定属性和方法的对象模板。TypeScript 的类概念和 JavaScript 中的类基本相同，但它提供了额外的类型检查和静态类型系统，从而增强了代码的安全性和可维护性。

1. TypeScript 中的类概述

TypeScript 中的类与 JavaScript 类非常相似，支持属性、构造函数、方法、访问修饰符（public、private、protected）、getter 和 setter、继承等特性。

基本语法

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

在上面的例子中，Person 类具有 name 和 age 两个属性，并且有一个构造函数用于初始化这些属性。greet 方法返回一个问候字符串。

2. TypeScript 类的特性

2.1 访问修饰符（Access Modifiers）

TypeScript 支持访问修饰符，用于控制类的成员在不同的作用域中的可见性。

public：默认修饰符，表示属性或方法是公共的，可以在任何地方访问。
private：表示属性或方法只能在类的内部访问，外部不能直接访问。
protected：表示属性或方法只能在类和子类中访问。

class Employee {public name: string;private salary: number;protected department: string;constructor(name: string, salary: number, department: string) {this.name = name;this.salary = salary;this.department = department;}public getSalary(): number {return this.salary;}
}const emp = new Employee("Jane", 5000, "Engineering");
console.log(emp.name);  // 公开属性可以访问
// console.log(emp.salary);  // 错误：私有属性不可访问
console.log(emp.getSalary());  // 可以通过公共方法访问私有属性

2.2 类的继承（Inheritance）

继承允许你创建一个基于另一个类的新类，继承类可以访问父类的公共和受保护成员，并且可以重写父类的方法。

class Manager extends Employee {constructor(name: string, salary: number, department: string) {super(name, salary, department);  // 调用父类构造函数}public manageTeam(): string {return `${this.name} is managing the ${this.department} team.`;}
}const manager = new Manager("Alice", 8000, "Marketing");
console.log(manager.manageTeam());  // 输出: Alice is managing the Marketing team.

2.3 Getter 和 Setter

TypeScript 支持 getter 和 setter 方法，它们允许你定义属性的访问行为（例如，读取和修改）。

class Product {private _price: number;constructor(price: number) {this._price = price;}get price(): number {return this._price;}set price(value: number) {if (value < 0) {throw new Error("Price cannot be negative");}this._price = value;}
}const product = new Product(100);
console.log(product.price);  // 获取价格
product.price = 120;  // 设置价格
// product.price = -10;  // 错误：价格不能为负

3. 类的应用场景

类在 TypeScript 中有很多实际应用场景。以下是几个常见的应用场景，结合实际项目进行讲解：

3.1 创建复杂的实体对象

在许多应用中，我们需要管理各种实体（如用户、商品、订单等）。这些实体通常有许多属性和方法，并且可能涉及到继承、封装和多态等面向对象特性。

示例：电商系统中的商品类

class Product {private name: string;private price: number;private category: string;constructor(name: string, price: number, category: string) {this.name = name;this.price = price;this.category = category;}getDetails(): string {return `Product: ${this.name}, Price: $${this.price}, Category: ${this.category}`;}applyDiscount(discountPercentage: number): void {this.price -= (this.price * discountPercentage) / 100;}
}// 使用 Product 类
const phone = new Product("iPhone 15", 999, "Electronics");
console.log(phone.getDetails());  // Product: iPhone 15, Price: $999, Category: Electronics
phone.applyDiscount(10);
console.log(phone.getDetails());  // Product: iPhone 15, Price: $899.1, Category: Electronics

在这个电商应用中，Product 类封装了商品的属性和行为（如获取商品详情和应用折扣）。通过创建商品实例，代码能更清晰地管理和操作商品信息。

3.2 管理应用中的状态

在前端开发中，类通常用于管理应用的状态。例如，在使用 React、Angular 或 Vue 等框架时，可能会使用类来管理应用的状态逻辑和数据变更。

示例：购物车类

class ShoppingCart {private items: string[] = [];addItem(item: string): void {this.items.push(item);}removeItem(item: string): void {this.items = this.items.filter(i => i !== item);}getItems(): string[] {return this.items;}
}const cart = new ShoppingCart();
cart.addItem("Laptop");
cart.addItem("Phone");
console.log(cart.getItems());  // ["Laptop", "Phone"]
cart.removeItem("Phone");
console.log(cart.getItems());  // ["Laptop"]

在这个例子中，ShoppingCart 类帮助我们管理购物车的状态，并提供了对购物车进行添加、删除商品操作的能力。

3.3 构建复杂的业务逻辑

有些项目需要处理复杂的业务逻辑，比如银行账户管理、用户权限系统等，这些都可以通过类来表示和组织。

示例：银行账户类

class BankAccount {private balance: number;constructor(initialBalance: number) {this.balance = initialBalance;}deposit(amount: number): void {if (amount > 0) {this.balance += amount;} else {console.error("Deposit amount must be positive.");}}withdraw(amount: number): void {if (amount > this.balance) {console.error("Insufficient funds.");} else {this.balance -= amount;}}getBalance(): number {return this.balance;}
}const account = new BankAccount(500);
account.deposit(100);
account.withdraw(50);
console.log(account.getBalance());  // 输出: 550