存取器使用 - 元素码农

发布时间: 2025-03-31 09:43

↑

# 存取器使用

存取器(Accessor)是TypeScript中的一个重要特性,它允许我们控制对类属性的访问。本文将详细介绍存取器的使用方法和应用场景。

## 什么是存取器?

存取器包括getter和setter方法,它们允许你拦截对类属性的访问和修改：
- getter: 用于获取属性值
- setter: 用于设置属性值

## 基本语法

```typescript
class Person {
    private _name: string;

get name(): string {
        return this._name;
    }

set name(value: string) {
        if (value.length > 0) {
            this._name = value;
        } else {
            throw new Error("Name cannot be empty");
        }
    }

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

const person = new Person("Alice");
console.log(person.name);  // 输出: "Alice"
person.name = "Bob";      // 正确
// person.name = "";      // 错误: Name cannot be empty
```

## 只读属性

我们可以只定义getter而不定义setter来创建只读属性：

```typescript
class Circle {
    private _radius: number;

constructor(radius: number) {
        this._radius = radius;
    }

get radius(): number {
        return this._radius;
    }

get area(): number {
        return Math.PI * this._radius ** 2;
    }
}

const circle = new Circle(5);
console.log(circle.area);  // 输出: 78.54...
// circle.area = 100;      // 错误: 'area' 是只读属性
```

## 计算属性

存取器可以用来创建计算属性：

```typescript
class Rectangle {
    private _width: number;
    private _height: number;

constructor(width: number, height: number) {
        this._width = width;
        this._height = height;
    }

get area(): number {
        return this._width * this._height;
    }

get perimeter(): number {
        return 2 * (this._width + this._height);
    }
}

const rect = new Rectangle(10, 20);
console.log(rect.area);      // 输出: 200
console.log(rect.perimeter); // 输出: 60
```

## 验证和转换

存取器可以用来验证和转换数据：

```typescript
class User {
    private _email: string;

get email(): string {
        return this._email;
    }

set email(value: string) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (emailRegex.test(value)) {
            this._email = value.toLowerCase();
        } else {
            throw new Error("Invalid email format");
        }
    }

constructor(email: string) {
        this._email = email.toLowerCase();
    }
}

const user = new User("test@example.com");
user.email = "NEW@EXAMPLE.COM";  // 自动转换为小写
console.log(user.email);         // 输出: "new@example.com"
```

## 延迟计算

存取器可以用来实现延迟计算：

```typescript
class DataProcessor {
    private _data: number[];
    private _average: number | null = null;

constructor(data: number[]) {
        this._data = data;
    }

get average(): number {
        if (this._average === null) {
            const sum = this._data.reduce((a, b) => a + b, 0);
            this._average = this._data.length > 0 ? sum / this._data.length : 0;
        }
        return this._average;
    }

addNumber(value: number) {
        this._data.push(value);
        this._average = null;  // 重置缓存的平均值
    }
}

const processor = new DataProcessor([1, 2, 3, 4, 5]);
console.log(processor.average);  // 计算并缓存平均值
processor.addNumber(6);          // 添加新数据
console.log(processor.average);  // 重新计算平均值
```

## 最佳实践

1. **命名约定**：
   - 私有属性使用下划线前缀
   - 存取器使用与属性相同的名称(不带下划线)

```typescript
class Example {
    private _value: string;

get value(): string {
        return this._value;
    }

set value(newValue: string) {
        this._value = newValue;
    }
}
```

2. **类型安全**：
   - 确保getter和setter的类型一致
   - 在setter中进行类型检查

```typescript
class SafeStorage {
    private _data: unknown;

set data(value: unknown) {
        if (this.validateData(value)) {
            this._data = value;
        }
    }

get data(): unknown {
        return this._data;
    }

private validateData(value: unknown): boolean {
        // 实现验证逻辑
        return true;
    }
}
```

3. **性能考虑**：
   - 避免在getter中进行复杂计算
   - 考虑使用缓存机制

## 实际应用场景

### 1. 表单验证

```typescript
class FormField {
    private _value: string = "";
    private _errors: string[] = [];

get value(): string {
        return this._value;
    }

set value(newValue: string) {
        this._value = newValue;
        this.validate();
    }

get errors(): readonly string[] {
        return this._errors;
    }

get isValid(): boolean {
        return this._errors.length === 0;
    }

private validate() {
        this._errors = [];
        if (this._value.length === 0) {
            this._errors.push("Field cannot be empty");
        }
    }
}
```

### 2. 状态管理

```typescript
class StateManager {
    private _state: Record<string, unknown> = {};
    private _listeners: Set<() => void> = new Set();

get state(): Readonly<Record<string, unknown>> {
        return this._state;
    }

set state(newState: Record<string, unknown>) {
        this._state = { ...this._state, ...newState };
        this.notifyListeners();
    }

private notifyListeners() {
        this._listeners.forEach(listener => listener());
    }

addListener(listener: () => void) {
        this._listeners.add(listener);
    }
}
```

## 总结

存取器是TypeScript中一个强大的特性,它允许我们：

- 控制对类属性的访问和修改
- 实现数据验证和转换
- 创建计算属性和只读属性
- 实现延迟计算和缓存机制

合理使用存取器可以帮助我们编写更加健壮和可维护的代码。通过封装属性访问,我们可以确保数据的一致性和有效性,同时提供更好的API设计。在实际开发中,应该根据具体需求选择合适的存取器模式。