How to Fix Static Property Translation Issues with JavaScript Getters

Static Property Retrieval Issue

When defining enum constants and calling the i18n translation method directly, the translation does not work because the enum object is initialized before the i18n instance.

export const OverdueStatus: any = {
  ABOUT_TO_OVERDUE: {
    value: 'ABOUT_TO_OVERDUE',
    name: i18n.global.t('common.about_to_overdue'),
    color: '#ad0000',
    bgColor: '#ffe1e1'
  }
};

The OverdueStatus object is created before the i18n instance, so the translation result is empty.

How to Elegantly Implement “Dynamic Property”?

JavaScript provides a built‑in solution: use a getter to compute the property value lazily.

export const OverdueStatus: any = {
  ABOUT_TO_OVERDUE: {
    value: 'ABOUT_TO_OVERDUE',
    get name() {
      return i18n.global.t('common.about_to_overdue');
    },
    color: '#ad0000',
    bgColor: '#ffe1e1'
  }
};

When the name property is accessed, the getter runs after the i18n instance is ready, ensuring the translation works.

Accessor Property Principle

In the JavaScript specification, a property defined with get is called an accessor property , which differs from a normal data property.

const obj = {
  get foo() {
    return "bar";
  }
};
// Equivalent to:
Object.defineProperty(obj, "foo", {
  get: function() { return "bar"; }
});

Reading obj.foo triggers the getter function instead of returning a fixed value.

Analogy with Vue computed

In Vue, a computed property is essentially a wrapper around a getter function.

Important Points

Getter cannot coexist with a data property of the same name.

Getter is read‑only; to support assignment you need a setter.

const obj = {
  _age: 18,
  get age() { return this._age; },
  set age(val) { this._age = val; }
};
obj.age = 20; // 20

Other Practical Scenarios

Lazy Evaluation

Complex calculations can be deferred until the property is actually used, improving performance.

const user = {
  firstName: "石",
  lastName: "小石",
  get fullName() {
    console.log("calculating fullName");
    return `${this.firstName}${this.lastName}`;
  }
};
console.log(user.fullName); // "石小石" (calculation runs once)

Data Encapsulation and Protection

Properties derived from internal state stay up‑to‑date automatically, eliminating manual updates.

const cart = {
  items: [100, 200, 300],
  get total() {
    return this.items.reduce((sum, price) => sum + price, 0);
  }
};
console.log(cart.total); // 600