Что такое getter?

Getter — методы доступа к свойствам объектов

Getter (получатель) — это специальный метод в JavaScript/TypeScript, который позволяет получить значение свойства объекта, используя специальный синтаксис. Это один из способов инкапсуляции данных и контроля доступа к ним.

Синтаксис getter

const obj = {
  _name: "John",
  
  // Getter
  get name() {
    return this._name;
  }
};

console.log(obj.name); // "John" — вызывается как свойство, а не метод

Getter в классах (ES6)

class Person {
  private _age: number = 0;

  // Getter
  get age(): number {
    return this._age;
  }

  // Setter для полноты
  set age(value: number) {
    if (value < 0) {
      throw new Error("Возраст не может быть отрицательным");
    }
    this._age = value;
  }
}

const person = new Person();
person.age = 25; // Используем setter
console.log(person.age); // 25 — используем getter

Зачем нужны getter

• Инкапсуляция — скрывают внутреннюю структуру объекта
• Валидация — можно добавить проверки при доступе к данным
• Вычисляемые свойства — можно вычислить значение на лету
• Readonly свойства — getter без setter делает свойство доступным только для чтения

class Rectangle {
  private _width: number = 0;
  private _height: number = 0;

  set width(value: number) {
    if (value <= 0) throw new Error("Ширина должна быть > 0");
    this._width = value;
  }

  get width(): number {
    return this._width;
  }

  // Вычисляемое свойство
  get area(): number {
    return this._width * this._height;
  }

  // Свойство только для чтения (нет setter)
  get perimeter(): number {
    return 2 * (this._width + this._height);
  }
}

const rect = new Rectangle();
rect.width = 10;
rect.height = 5;

console.log(rect.area); // 50
console.log(rect.perimeter); // 30

Getter в React компонентах

// Пример вычисляемого свойства в React
interface UserData {
  firstName: string;
  lastName: string;
}

class UserComponent extends React.Component<{}, UserData> {
  constructor(props) {
    super(props);
    this.state = {
      firstName: "John",
      lastName: "Doe"
    };
  }

  // Getter для полного имени
  get fullName(): string {
    return `${this.state.firstName} ${this.state.lastName}`;
  }

  render() {
    return <div>Привет, {this.fullName}!</div>;
  }
}

Getter vs простой метод

С методом:

class User {
  getName() {
    return this.name;
  }
}

const user = new User();
console.log(user.getName()); // нужны скобки ()

С getter:

class User {
  get name() {
    return this._name;
  }
}

const user = new User();
console.log(user.name); // без скобок, выглядит как свойство

Важные моменты

• Getter не может принимать параметры
• Getter не может возвращать разные типы (TypeScript строго типизирует)
• Getter вызывается каждый раз при обращении (no caching по умолчанию)
• Для кэширования результата используй useMemo в React или собственное кэширование

// Пример с логированием в getter
class Logger {
  private _data: string = "secret";

  get data(): string {
    console.log("Getter вызван!");
    return this._data;
  }
}

const logger = new Logger();
logger.data; // Логирует "Getter вызван!"
logger.data; // Логирует ещё раз — getter вызывается каждый раз