活动公告

系统通知
通知：端午节限时活动来袭！
06-18 23:43
系统通知
通知：微软邮箱更换提醒
06-14 00:00
系统通知
通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，资源失效请在帖子内回复要求补档，会尽快处理！
10-23 09:31
>社区 > 科技 > 经验交流 >帖子
本版发帖返回

TypeScript类属性详解从基础定义到高级应用全面掌握类型安全与面向对象编程的核心概念

这是个蓝孩子 当前离线 威震华夏关云长
SunJu_FaceMall

3万

主题

3077

科技点

3万

积分

执行版主

碾压王

积分
32876

塔罗立华奏
执行版主 发表于 2025-9-29 22:40:01 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
引言

TypeScript作为JavaScript的超集，为我们带来了静态类型检查和更强大的面向对象编程能力。在TypeScript的众多特性中，类属性是构建健壮、可维护应用程序的核心组成部分。类属性不仅存储对象的状态，还通过类型注解和修饰符提供了强大的类型安全保障。本文将深入探讨TypeScript类属性的各个方面，从基础定义到高级应用，帮助读者全面掌握这一核心概念，提升TypeScript编程技能。

TypeScript类属性基础

类属性的基本定义

在TypeScript中，类属性是类中声明的变量，用于存储对象的状态或数据。与JavaScript不同，TypeScript允许我们为属性指定类型，从而在编译阶段进行类型检查。
  2. class Person {
  3.     name: string;  // 声明一个字符串类型的属性
  4.     age: number;  // 声明一个数字类型的属性
  5. }
  7. let person = new Person();
  8. person.name = "Alice";
  9. person.age = 30;
复制代码

在上面的例子中，我们定义了一个Person类，它有两个属性：name和age。每个属性都有明确的类型注解，确保只能赋相应类型的值。

属性类型注解

TypeScript中的类属性可以使用任何有效的类型进行注解，包括基本类型、对象类型、数组类型、函数类型等。
  2. class Car {
  3.     brand: string;                    // 字符串类型
  4.     year: number;                     // 数字类型
  5.     isElectric: boolean;              // 布尔类型
  6.     features: string[];               // 字符串数组类型
  7.     engine: { type: string; power: number }; // 对象类型
  8.     drive: (speed: number) => void;   // 函数类型
  9. }
  11. let myCar = new Car();
  12. myCar.brand = "Tesla";
  13. myCar.year = 2022;
  14. myCar.isElectric = true;
  15. myCar.features = ["Autopilot", "Full Self-Driving"];
  16. myCar.engine = { type: "Electric", power: 400 };
  17. myCar.drive = (speed: number) => {
  18.     console.log(`Driving at ${speed} mph`);
  19. };
复制代码

属性初始化

在TypeScript中，类属性可以在声明时初始化，也可以在构造函数中初始化。如果属性没有初始化，并且没有显式标记为可选属性，TypeScript会报错。
  2. class Product {
  3.     // 声明时初始化
  4.     id: number = Math.floor(Math.random() * 1000);
  5.     category: string = "General";
  6.    
  7.     // 构造函数中初始化
  8.     name: string;
  9.     price: number;
  10.    
  11.     constructor(name: string, price: number) {
  12.         this.name = name;
  13.         this.price = price;
  14.     }
  15. }
  17. const product = new Product("Laptop", 999);
  18. console.log(product.id);      // 随机生成的ID
  19. console.log(product.category); // "General"
  20. console.log(product.name);    // "Laptop"
  21. console.log(product.price);   // 999
复制代码

TypeScript 4.0+ 还支持使用类属性初始化的简写形式，当构造函数参数与类属性同名时：
  2. class Employee {
  3.     constructor(
  4.         public name: string,      // 自动创建并初始化name属性
  5.         private salary: number,   // 自动创建并初始化私有salary属性
  6.         readonly department: string // 自动创建并初始化只读department属性
  7.     ) {}
  8. }
  10. const employee = new Employee("John Doe", 50000, "Engineering");
  11. console.log(employee.name);        // "John Doe"
  12. // console.log(employee.salary);  // 错误：salary是私有的
  13. console.log(employee.department);  // "Engineering"
  14. // employee.department = "HR";    // 错误：department是只读的
复制代码

属性修饰符

TypeScript提供了几种属性修饰符，用于控制属性的可访问性和可修改性。这些修饰符包括public、private、protected和readonly。

public

public是默认的修饰符，表示属性可以在任何地方被访问。即使不显式指定，所有属性默认都是public的。
  2. class Student {
  3.     public studentId: number;  // 显式声明为public
  4.     name: string;              // 默认为public
  5.    
  6.     constructor(studentId: number, name: string) {
  7.         this.studentId = studentId;
  8.         this.name = name;
  9.     }
  10. }
  12. let student = new Student(12345, "Jane Smith");
  13. console.log(student.studentId);  // 12345
  14. console.log(student.name);       // "Jane Smith"
  15. student.name = "Jane Doe";       // 可以修改
复制代码

private

private修饰符表示属性只能在声明它的类内部访问。子类和类的外部都无法访问私有属性。
  2. class BankAccount {
  3.     private balance: number;
  4.    
  5.     constructor(initialBalance: number) {
  6.         this.balance = initialBalance;
  7.     }
  8.    
  9.     public deposit(amount: number): void {
  10.         if (amount > 0) {
  11.             this.balance += amount;
  12.             console.log(`Deposited $${amount}. New balance: $${this.balance}`);
  13.         }
  14.     }
  15.    
  16.     public getBalance(): number {
  17.         return this.balance;
  18.     }
  19. }
  21. let account = new BankAccount(1000);
  22. account.deposit(500);  // Deposited $500. New balance: $1500
  23. console.log(account.getBalance());  // 1500
  24. // console.log(account.balance);     // 错误：balance是私有的，无法在类外部访问
  26. // 尝试通过子类访问私有属性
  27. class SavingsAccount extends BankAccount {
  28.     public showBalance(): void {
  29.         // console.log(this.balance);  // 错误：无法在子类中访问父类的私有属性
  30.     }
  31. }
复制代码

protected

protected修饰符表示属性只能在声明它的类及其子类中访问。与private不同，protected属性允许在继承层次结构中访问。
  2. class Vehicle {
  3.     protected brand: string;
  4.    
  5.     constructor(brand: string) {
  6.         this.brand = brand;
  7.     }
  8.    
  9.     protected getBrand(): string {
  10.         return this.brand;
  11.     }
  12. }
  14. class Car extends Vehicle {
  15.     private model: string;
  16.    
  17.     constructor(brand: string, model: string) {
  18.         super(brand);
  19.         this.model = model;
  20.     }
  21.    
  22.     public getInfo(): string {
  23.         // 可以访问父类的protected属性和方法
  24.         return `${this.brand} ${this.model}`;
  25.     }
  26. }
  28. let myCar = new Car("Toyota", "Camry");
  29. console.log(myCar.getInfo());  // "Toyota Camry"
  30. // console.log(myCar.brand);   // 错误：无法在类外部访问protected属性
复制代码

readonly

readonly修饰符表示属性只能在初始化时或构造函数中被赋值，之后不能修改。这类似于其他语言中的常量概念。
  2. class Circle {
  3.     readonly radius: number;
  4.     readonly pi: number = 3.14159;
  5.    
  6.     constructor(radius: number) {
  7.         this.radius = radius;
  8.     }
  9.    
  10.     getArea(): number {
  11.         return this.pi * this.radius * this.radius;
  12.     }
  13. }
  15. let circle = new Circle(5);
  16. console.log(circle.getArea());  // 78.53975
  17. // circle.radius = 10;          // 错误：radius是只读的，不能修改
  18. // circle.pi = 3.14;            // 错误：pi是只读的，不能修改
复制代码

静态属性

静态属性是属于类本身而不是类实例的属性。它们使用static关键字声明，可以通过类名直接访问，而不需要创建类的实例。

静态属性定义与使用
  2. class MathUtility {
  3.     static PI: number = 3.14159;
  4.    
  5.     static calculateCircumference(radius: number): number {
  6.         return 2 * this.PI * radius;
  7.     }
  8. }
  10. // 直接通过类名访问静态属性和方法
  11. console.log(MathUtility.PI);  // 3.14159
  12. console.log(MathUtility.calculateCircumference(5));  // 31.4159
  14. // 创建实例后无法访问静态属性
  15. const mathUtil = new MathUtility();
  16. // console.log(mathUtil.PI);  // 错误：实例无法访问静态属性
复制代码

静态属性的应用场景

静态属性通常用于存储与类相关的常量、配置信息或计数器等。
  2. class User {
  3.     private static userCount: number = 0;
  4.     private static readonly MAX_USERS: number = 100;
  5.    
  6.     constructor(private name: string) {
  7.         // 每次创建新用户时增加计数器
  8.         User.userCount++;
  9.         
  10.         if (User.userCount > User.MAX_USERS) {
  11.             throw new Error(`Maximum number of users (${User.MAX_USERS}) exceeded`);
  12.         }
  13.     }
  14.    
  15.     public static getUserCount(): number {
  16.         return User.userCount;
  17.     }
  18.    
  19.     public static getMaxUsers(): number {
  20.         return User.MAX_USERS;
  21.     }
  22. }
  24. console.log(User.getUserCount());  // 0
  25. const user1 = new User("Alice");
  26. const user2 = new User("Bob");
  27. console.log(User.getUserCount());  // 2
  29. try {
  30.     // 尝试创建超过最大用户数的用户
  31.     for (let i = 0; i < 100; i++) {
  32.         new User(`User${i}`);
  33.     }
  34. } catch (error) {
  35.     console.error(error.message);  // Maximum number of users (100) exceeded
  36. }
复制代码

属性访问器

TypeScript支持使用getter和setter（也称为访问器）来控制对类属性的访问和修改。这使得我们可以在属性被访问或修改时执行额外的逻辑。

getter和setter
  2. class Employee {
  3.     private _salary: number = 0;
  4.    
  5.     // getter
  6.     get salary(): number {
  7.         return this._salary;
  8.     }
  9.    
  10.     // setter
  11.     set salary(newSalary: number) {
  12.         if (newSalary < 0) {
  13.             throw new Error("Salary cannot be negative");
  14.         }
  15.         this._salary = newSalary;
  16.     }
  17. }
  19. const employee = new Employee();
  20. employee.salary = 5000;  // 调用setter
  21. console.log(employee.salary);  // 调用getter，输出5000
  23. try {
  24.     employee.salary = -1000;  // 抛出错误：Salary cannot be negative
  25. } catch (error) {
  26.     console.error(error.message);
  27. }
复制代码

属性访问器的优势

属性访问器提供了几个优势：

1. 封装：隐藏内部实现细节，只暴露必要的接口。
2. 验证：在设置属性值时进行验证。
3. 计算属性：提供基于其他属性计算得出的值。
4. 通知机制：在属性变化时触发其他操作。
  2. class Rectangle {
  3.     private _width: number = 0;
  4.     private _height: number = 0;
  5.    
  6.     get width(): number {
  7.         return this._width;
  8.     }
  9.    
  10.     set width(value: number) {
  11.         if (value <= 0) {
  12.             throw new Error("Width must be positive");
  13.         }
  14.         this._width = value;
  15.         this.logChange("width", value);
  16.     }
  17.    
  18.     get height(): number {
  19.         return this._height;
  20.     }
  21.    
  22.     set height(value: number) {
  23.         if (value <= 0) {
  24.             throw new Error("Height must be positive");
  25.         }
  26.         this._height = value;
  27.         this.logChange("height", value);
  28.     }
  29.    
  30.     // 计算属性
  31.     get area(): number {
  32.         return this._width * this._height;
  33.     }
  34.    
  35.     get perimeter(): number {
  36.         return 2 * (this._width + this._height);
  37.     }
  38.    
  39.     private logChange(property: string, value: number): void {
  40.         console.log(`${property} changed to ${value}`);
  41.     }
  42. }
  44. const rect = new Rectangle();
  45. rect.width = 10;  // 输出：width changed to 10
  46. rect.height = 5;  // 输出：height changed to 5
  48. console.log(rect.area);      // 50
  49. console.log(rect.perimeter); // 30
复制代码

抽象类中的属性

抽象类是不能被实例化的类，它们通常作为基类，为子类提供共同的属性和方法。在抽象类中，我们可以定义抽象属性，这些属性在抽象类中没有实现，必须在子类中实现。

抽象属性定义
  2. abstract class Shape {
  3.     // 抽象属性，没有初始化
  4.     abstract color: string;
  5.    
  6.     // 普通属性，有初始化
  7.     readonly id: number = Math.floor(Math.random() * 1000);
  8.    
  9.     // 抽象方法
  10.     abstract getArea(): number;
  11.    
  12.     // 普通方法
  13.     getInfo(): string {
  14.         return `Shape [ID: ${this.id}, Color: ${this.color}]`;
  15.     }
  16. }
复制代码

抽象属性的实现
  2. class Circle extends Shape {
  3.     // 实现抽象属性
  4.     color: string;
  5.     radius: number;
  6.    
  7.     constructor(color: string, radius: number) {
  8.         super();
  9.         this.color = color;
  10.         this.radius = radius;
  11.     }
  12.    
  13.     // 实现抽象方法
  14.     getArea(): number {
  15.         return Math.PI * this.radius * this.radius;
  16.     }
  17. }
  19. class Rectangle extends Shape {
  20.     // 实现抽象属性
  21.     color: string;
  22.     width: number;
  23.     height: number;
  24.    
  25.     constructor(color: string, width: number, height: number) {
  26.         super();
  27.         this.color = color;
  28.         this.width = width;
  29.         this.height = height;
  30.     }
  31.    
  32.     // 实现抽象方法
  33.     getArea(): number {
  34.         return this.width * this.height;
  35.     }
  36. }
  38. const circle = new Circle("Red", 5);
  39. console.log(circle.getInfo());  // Shape [ID: 随机数, Color: Red]
  40. console.log(circle.getArea());  // 78.539...
  42. const rectangle = new Rectangle("Blue", 4, 6);
  43. console.log(rectangle.getInfo());  // Shape [ID: 随机数, Color: Blue]
  44. console.log(rectangle.getArea());  // 24
复制代码

类属性与接口

接口在TypeScript中用于定义对象的结构，包括类应该具有的属性和方法。类可以实现一个或多个接口，确保它们具有接口中定义的所有属性。

接口定义类属性
  2. interface IPerson {
  3.     name: string;
  4.     age: number;
  5.     email?: string;  // 可选属性
  6.     readonly id: number;  // 只读属性
  7. }
  9. class Person implements IPerson {
  10.     name: string;
  11.     age: number;
  12.     email?: string;
  13.     readonly id: number;
  14.    
  15.     constructor(id: number, name: string, age: number, email?: string) {
  16.         this.id = id;
  17.         this.name = name;
  18.         this.age = age;
  19.         this.email = email;
  20.     }
  21. }
  23. const person = new Person(1, "John", 30, "john@example.com");
  24. console.log(person.name);  // "John"
  25. // person.id = 2;  // 错误：id是只读的
复制代码

类实现接口属性

一个类可以实现多个接口，每个接口可能定义不同的属性集。
  2. interface IIdentifiable {
  3.     id: number;
  4.     getId(): number;
  5. }
  7. interface ILoggable {
  8.     log(): void;
  9. }
  11. class Product implements IIdentifiable, ILoggable {
  12.     // 实现IIdentifiable接口
  13.     id: number;
  14.    
  15.     // Product类自己的属性
  16.     name: string;
  17.     price: number;
  18.    
  19.     constructor(id: number, name: string, price: number) {
  20.         this.id = id;
  21.         this.name = name;
  22.         this.price = price;
  23.     }
  24.    
  25.     // 实现IIdentifiable接口的方法
  26.     getId(): number {
  27.         return this.id;
  28.     }
  29.    
  30.     // 实现ILoggable接口的方法
  31.     log(): void {
  32.         console.log(`Product [ID: ${this.id}, Name: ${this.name}, Price: $${this.price}]`);
  33.     }
  34. }
  36. const product = new Product(101, "Laptop", 999.99);
  37. console.log(product.getId());  // 101
  38. product.log();  // Product [ID: 101, Name: Laptop, Price: $999.99]
复制代码

高级属性模式

TypeScript提供了一些高级的属性模式，使类属性的定义更加灵活和强大。

可选属性

使用?标记的属性是可选的，可以在类实例中存在或不存在。
  2. class UserProfile {
  3.     username: string;
  4.     email: string;
  5.     age?: number;  // 可选属性
  6.     bio?: string;  // 可选属性
  7.    
  8.     constructor(username: string, email: string, age?: number, bio?: string) {
  9.         this.username = username;
  10.         this.email = email;
  11.         this.age = age;
  12.         this.bio = bio;
  13.     }
  14.    
  15.     displayInfo(): void {
  16.         console.log(`Username: ${this.username}, Email: ${this.email}`);
  17.         if (this.age !== undefined) {
  18.             console.log(`Age: ${this.age}`);
  19.         }
  20.         if (this.bio !== undefined) {
  21.             console.log(`Bio: ${this.bio}`);
  22.         }
  23.     }
  24. }
  26. const user1 = new UserProfile("alice", "alice@example.com");
  27. const user2 = new UserProfile("bob", "bob@example.com", 25, "Software developer");
  29. user1.displayInfo();
  30. // 输出：
  31. // Username: alice, Email: alice@example.com
  33. user2.displayInfo();
  34. // 输出：
  35. // Username: bob, Email: bob@example.com
  36. // Age: 25
  37. // Bio: Software developer
复制代码

只读属性

如前所述，readonly修饰符用于创建只读属性，但还有一些其他方式可以创建只读属性。
  2. class Configuration {
  3.     // 使用readonly修饰符
  4.     readonly appName: string = "MyApp";
  5.    
  6.     // 使用getter但不提供setter
  7.     private _version: string = "1.0.0";
  8.     get version(): string {
  9.         return this._version;
  10.     }
  11.    
  12.     // 使用Object.defineProperty
  13.     private _apiKey: string = "secret-key";
  14.    
  15.     constructor() {
  16.         // 使用Object.defineProperty创建只读属性
  17.         Object.defineProperty(this, 'apiKey', {
  18.             value: this._apiKey,
  19.             writable: false,
  20.             enumerable: true,
  21.             configurable: false
  22.         });
  23.     }
  24. }
  26. const config = new Configuration();
  27. console.log(config.appName);  // "MyApp"
  28. console.log(config.version);  // "1.0.0"
  29. console.log(config.apiKey);   // "secret-key"
  31. // 尝试修改只读属性
  32. // config.appName = "NewApp";  // 错误：appName是只读的
  33. // config.version = "2.0.0";   // 错误：没有setter
  34. // config.apiKey = "new-key";  // 错误：apiKey是只读的
复制代码

计算属性名

TypeScript允许使用表达式作为属性名，这在创建动态属性时非常有用。
  2. class DynamicProperties {
  3.     // 使用计算属性名
  4.     [propertyName: string]: any;
  5.    
  6.     constructor() {
  7.         // 动态设置属性
  8.         this["id"] = 123;
  9.         this["name"] = "Dynamic Object";
  10.         
  11.         // 使用变量作为属性名
  12.         const propName = "createdAt";
  13.         this[propName] = new Date();
  14.     }
  15. }
  17. const dynamicObj = new DynamicProperties();
  18. console.log(dynamicObj.id);        // 123
  19. console.log(dynamicObj.name);      // "Dynamic Object"
  20. console.log(dynamicObj.createdAt); // 当前日期时间
  22. // 添加更多动态属性
  23. dynamicObj["updatedAt"] = new Date();
  24. console.log(dynamicObj.updatedAt); // 当前日期时间
复制代码

属性装饰器

装饰器是一种特殊的声明，可以附加到类声明、方法、属性或参数上，以修改类的行为。属性装饰器用于观察、修改或替换属性定义。

装饰器基础

要使用装饰器，必须在tsconfig.json中启用experimentalDecorators选项：
  2. {
  3.     "compilerOptions": {
  4.         "experimentalDecorators": true
  5.     }
  6. }
复制代码

自定义属性装饰器
  2. // 属性装饰器函数
  3. function logProperty(target: any, propertyKey: string) {
  4.     // 保存原始属性的值
  5.     let value: any;
  6.    
  7.     // 属性getter
  8.     const getter = function() {
  9.         console.log(`Get: ${propertyKey} => ${value}`);
  10.         return value;
  11.     };
  12.    
  13.     // 属性setter
  14.     const setter = function(newVal: any) {
  15.         console.log(`Set: ${propertyKey} => ${newVal}`);
  16.         value = newVal;
  17.     };
  18.    
  19.     // 替换属性
  20.     Object.defineProperty(target, propertyKey, {
  21.         get: getter,
  22.         set: setter,
  23.         enumerable: true,
  24.         configurable: true
  25.     });
  26. }
  28. // 只读属性装饰器
  29. function readonly(target: any, propertyKey: string) {
  30.     Object.defineProperty(target, propertyKey, {
  31.         writable: false,
  32.         enumerable: true,
  33.         configurable: true
  34.     });
  35. }
  37. class Example {
  38.     @logProperty
  39.     public name: string;
  40.    
  41.     @readonly
  42.     public version: string = "1.0.0";
  43.    
  44.     constructor(name: string) {
  45.         this.name = name;
  46.     }
  47. }
  49. const example = new Example("Test");
  50. // 输出：Set: name => Test
  52. const nameValue = example.name;
  53. // 输出：Get: name => Test
  55. example.name = "Updated";
  56. // 输出：Set: name => Updated
  58. console.log(example.version);  // "1.0.0"
  59. // example.version = "2.0.0";  // 错误：version是只读的
复制代码

更复杂的属性装饰器

下面是一个更复杂的属性装饰器示例，用于验证属性值：
  2. // 验证装饰器工厂
  3. function validate(validationFn: (value: any) => boolean, errorMessage: string) {
  4.     return function(target: any, propertyKey: string) {
  5.         let value: any;
  6.         
  7.         const getter = function() {
  8.             return value;
  9.         };
  10.         
  11.         const setter = function(newVal: any) {
  12.             if (!validationFn(newVal)) {
  13.                 throw new Error(errorMessage);
  14.             }
  15.             value = newVal;
  16.         };
  17.         
  18.         Object.defineProperty(target, propertyKey, {
  19.             get: getter,
  20.             set: setter,
  21.             enumerable: true,
  22.             configurable: true
  23.         });
  24.     };
  25. }
  27. class User {
  28.     @validate(
  29.         value => typeof value === 'string' && value.length >= 3,
  30.         "Username must be at least 3 characters long"
  31.     )
  32.     public username: string;
  33.    
  34.     @validate(
  35.         value => typeof value === 'number' && value >= 18 && value <= 120,
  36.         "Age must be between 18 and 120"
  37.     )
  38.     public age: number;
  39.    
  40.     @validate(
  41.         value => typeof value === 'string' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
  42.         "Invalid email format"
  43.     )
  44.     public email: string;
  45.    
  46.     constructor(username: string, age: number, email: string) {
  47.         this.username = username;
  48.         this.age = age;
  49.         this.email = email;
  50.     }
  51. }
  53. // 有效用户
  54. const validUser = new User("john_doe", 30, "john@example.com");
  55. console.log(validUser.username);  // "john_doe"
  57. try {
  58.     // 无效用户名
  59.     const invalidUser1 = new User("jd", 30, "john@example.com");
  60. } catch (error) {
  61.     console.error(error.message);  // Username must be at least 3 characters long
  62. }
  64. try {
  65.     // 无效年龄
  66.     const invalidUser2 = new User("john_doe", 15, "john@example.com");
  67. } catch (error) {
  68.     console.error(error.message);  // Age must be between 18 and 120
  69. }
  71. try {
  72.     // 无效邮箱
  73.     const invalidUser3 = new User("john_doe", 30, "invalid-email");
  74. } catch (error) {
  75.     console.error(error.message);  // Invalid email format
  76. }
复制代码

类属性的最佳实践

命名约定

遵循一致的命名约定可以提高代码的可读性和可维护性：
  2. class UserProfile {
  3.     // 使用驼峰命名法命名普通属性
  4.     firstName: string;
  5.     lastName: string;
  6.     dateOfBirth: Date;
  7.    
  8.     // 私有属性可以使用下划线前缀
  9.     private _apiKey: string;
  10.    
  11.     // 常量属性使用全大写和下划线
  12.     static readonly MAX_LOGIN_ATTEMPTS: number = 3;
  13.    
  14.     // 布尔属性使用is或has前缀
  15.     isActive: boolean;
  16.     hasPermission: boolean;
  17.    
  18.     constructor(firstName: string, lastName: string, dateOfBirth: Date) {
  19.         this.firstName = firstName;
  20.         this.lastName = lastName;
  21.         this.dateOfBirth = dateOfBirth;
  22.         this._apiKey = "default-api-key";
  23.         this.isActive = true;
  24.         this.hasPermission = false;
  25.     }
  26. }
复制代码

属性组织

在类中组织属性可以提高代码的可读性：
  2. class Order {
  3.     // 1. 静态属性
  4.     static readonly MIN_ORDER_VALUE: number = 10;
  5.     static readonly MAX_ITEMS: number = 100;
  6.    
  7.     // 2. 公共实例属性
  8.     public id: string;
  9.     public customerId: string;
  10.     public items: OrderItem[];
  11.    
  12.     // 3. 受保护属性
  13.     protected discountRate: number = 0;
  14.    
  15.     // 4. 私有属性
  16.     private _createdAt: Date;
  17.     private _updatedAt: Date;
  18.     private _status: OrderStatus = OrderStatus.Pending;
  19.    
  20.     constructor(id: string, customerId: string, items: OrderItem[]) {
  21.         this.id = id;
  22.         this.customerId = customerId;
  23.         this.items = items;
  24.         this._createdAt = new Date();
  25.         this._updatedAt = new Date();
  26.     }
  27.    
  28.     // 方法...
  29. }
  31. enum OrderStatus {
  32.     Pending,
  33.     Processing,
  34.     Shipped,
  35.     Delivered,
  36.     Cancelled
  37. }
  39. interface OrderItem {
  40.     productId: string;
  41.     quantity: number;
  42.     price: number;
  43. }
复制代码

类型安全考虑

充分利用TypeScript的类型系统来增强属性的类型安全：
  2. // 使用联合类型
  3. type UserRole = 'admin' | 'editor' | 'viewer';
  5. class User {
  6.     role: UserRole;
  7.    
  8.     constructor(role: UserRole) {
  9.         this.role = role;
  10.     }
  11. }
  13. const admin = new User('admin');
  14. // const invalidUser = new User('guest');  // 错误：'guest'不是有效的UserRole
  16. // 使用字面量类型
  17. type HttpStatus = 200 | 201 | 400 | 401 | 404 | 500;
  19. class ApiResponse {
  20.     status: HttpStatus;
  21.     data: any;
  22.    
  23.     constructor(status: HttpStatus, data: any) {
  24.         this.status = status;
  25.         this.data = data;
  26.     }
  27. }
  29. const successResponse = new ApiResponse(200, { message: 'Success' });
  30. // const invalidResponse = new ApiResponse(300, {});  // 错误：300不是有效的HttpStatus
  32. // 使用泛型类
  33. class Repository<T> {
  34.     private items: T[] = [];
  35.    
  36.     add(item: T): void {
  37.         this.items.push(item);
  38.     }
  39.    
  40.     getAll(): T[] {
  41.         return [...this.items];
  42.     }
  43. }
  45. interface Product {
  46.     id: string;
  47.     name: string;
  48.     price: number;
  49. }
  51. const productRepository = new Repository<Product>();
  52. productRepository.add({ id: '1', name: 'Laptop', price: 999 });
  53. // productRepository.add({ id: '2', name: 'Phone' });  // 错误：缺少price属性
复制代码

总结

TypeScript类属性是构建类型安全和面向对象应用程序的核心组成部分。通过本文的详细探讨，我们了解了TypeScript类属性的各个方面：

1. 基础定义：类属性的基本定义、类型注解和初始化方式。
2. 属性修饰符：public、private、protected和readonly修饰符的使用和区别。
3. 静态属性：属于类本身而不是实例的属性，以及它们的应用场景。
4. 属性访问器：使用getter和setter控制属性访问和修改。
5. 抽象类中的属性：抽象属性的定义和实现。
6. 类属性与接口：接口如何定义类属性，以及类如何实现接口属性。
7. 高级属性模式：可选属性、只读属性和计算属性名。
8. 属性装饰器：使用装饰器观察、修改或替换属性定义。
9. 最佳实践：属性命名约定、组织方式和类型安全考虑。

掌握这些概念和技术，将帮助开发者充分利用TypeScript的类型系统和面向对象特性，构建更加健壮、可维护的应用程序。TypeScript类属性不仅提供了强大的类型安全保障，还通过修饰符、访问器和装饰器等特性，为开发者提供了灵活的工具来设计和实现复杂的类结构。

随着TypeScript的不断发展，类属性和相关特性也在不断演进。保持对最新版本特性的关注，并遵循最佳实践，将有助于开发者充分利用TypeScript的强大功能，提升代码质量和开发效率。
「七転び八起き（ななころびやおき）」
回复

使用道具 举报

返回列表 发新帖
您需要登录后才可以回帖 登录 | 立即注册
高级模式
B Color Image Link Quote Code Smilies

本版积分规则