国务院政府网站发展建设seo免费资源大全
在 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;}// Getterget age(): number {return this._age;}// Setterset 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); // 输出 30user.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 {@logMethodadd(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）。 |
| 装饰器 | 用于在类或类成员上添加元数据或修改行为，常用于框架开发。 |