欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 维修 > 【TS学习】(19)TS中的类

【TS学习】(19)TS中的类

2025/4/2 18:00:44 来源:https://blog.csdn.net/qq_45739157/article/details/146920191  浏览:    关键词:【TS学习】(19)TS中的类

在 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"

在这里:

  • nameage 是类的属性,分别表示用户的姓名和年龄。

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) 定义
  • 存取器是一种特殊的属性,允许通过 getset 方法控制对某个属性的访问和修改。
  • 存取器提供了封装和验证的能力。
示例
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 提供了三种访问修饰符:publicprivateprotected
(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 访问类的属性和其他方法。
存取器提供对属性的安全访问和修改,支持封装和验证逻辑。
访问修饰符控制类成员的可见性(publicprivateprotected)。
装饰器用于在类或类成员上添加元数据或修改行为,常用于框架开发。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词