TypeScript 23 🔷 Getters, Setters, and Accessors
Getters and setters are methods that look like properties. You define get name() and set name(value), and callers use obj.name — no parentheses, no explicit function call. Under the hood, the getter or setter runs. TypeScript adds type checking on both sides: the getter’s return type and the setter’s parameter type. They’re the tool for computed properties, validation on assignment, lazy initialization, and encapsulation — hiding internal state behind a property interface that looks simple but does work when accessed.
Key point: A getter looks like a property read but runs code. A setter looks like a property write but runs code. Together they let you expose a clean property interface over internal logic. The class’s public API says user.fullName, but the implementation computes it from firstName and lastName. TypeScript checks the types on both sides. Use getters for derived values, setters for validation, and both when you want the property to feel simple while doing real work.
What getters and setters are
A getter is a method declared with get that runs when a property is read. A setter is declared with set and runs when a property is written.
class Circle {
constructor(private _radius: number) {}
get radius(): number {
return this._radius;
}
set radius(value: number) {
if (value < 0) throw new Error('Radius must be positive');
this._radius = value;
}
}Usage:
const c = new Circle(5);
c.radius; // 5 — runs the getter
c.radius = 10; // runs the setter
c.radius = -1; // throwsThe caller uses c.radius like a plain property. Behind the scenes, the getter or setter runs.
What you get:
- Property syntax for the caller — no method calls
- Full logic in the getter or setter — validation, computation, side effects
- Type checking on both read and write
- Encapsulation — the underlying storage (
_radius) stays private
Conventions:
_name— underscore prefix for the private backing field, common in TypeScript and JavaScript#name— JavaScript’s real private fields, an alternativereadonly— used for properties that have a getter but no setter
Getter-only: A getter without a setter makes the property read-only from the outside.
class User {
constructor(private _name: string) {}
get name(): string {
return this._name;
}
}
const u = new User('Alice');
u.name; // ✅
u.name = 'Bob'; // ❌ read-onlyTypeScript flags the assignment as an error — name has no setter.
Setter-only: A setter without a getter is unusual but allowed — write-only.
class Secret {
set password(value: string) {
// hash and store
}
}In practice, setter-only is rare. Almost always you have both or getter-only.
Why getters and setters exist: They let a property look simple while doing real work. Without them, you’d expose a method (
getFullName()) or a raw property that any code could set. With them, you get property syntax and full control over what happens. That balance is what makes them useful.
Types on getters and setters
TypeScript types the getter’s return and the setter’s parameter. They must match.
class Temperature {
private _celsius = 0;
get celsius(): number {
return this._celsius;
}
set celsius(value: number) {
this._celsius = value;
}
}The getter returns number; the setter accepts number. TypeScript checks both.
Mismatched types are an error:
class Bad {
private _value = 0;
get value(): number {
return this._value;
}
set value(v: string) { // ❌ setter parameter must match getter return
this._value = Number(v);
}
}The error: “Getter and setter must have the same type.”
Why the rule: A property has one type. Reading gives a value; writing takes a value. If they differ, the property’s type is ambiguous. TypeScript enforces consistency.
Type inference: If you specify the getter’s return type, the setter’s parameter must match. If neither is specified, TypeScript infers from the backing field.
class User {
private _name = '';
get name() { return this._name; } // inferred string
set name(v: string) { this._name = v; } // must be string
}Union types: The property can have a union type.
class Field {
private _value: string | number = '';
get value(): string | number {
return this._value;
}
set value(v: string | number) {
this._value = v;
}
}Why getter/setter types must match: A property is one thing — a slot with a type. Reading returns
T; writing acceptsT. If they could differ,obj.x = 'a'; const y: number = obj.x;would be confusing — what type isx? TypeScript keeps them consistent to make properties predictable.
Computed properties
A computed property derives its value from other fields. Getters are the standard way to expose them.
class User {
constructor(
public firstName: string,
public lastName: string
) {}
get fullName(): string {
return `${this.firstName} ${this.lastName}`;
}
}
const u = new User('Alice', 'Johnson');
u.fullName; // "Alice Johnson"fullName isn’t stored — it’s computed on read. The caller sees a property; the class computes it.
Why computed properties matter:
- Single source of truth —
firstNameandlastNameare stored;fullNamederives from them - No stale data — change
firstNameandfullNameupdates automatically - Clean API — callers read
fullNamewithout knowing how it’s computed
Read-only by convention: A computed property usually has no setter. If you want to set it, you’d need logic to parse the value — often a bad idea.
class User {
get fullName(): string { return `${this.firstName} ${this.lastName}`; }
set fullName(value: string) {
const [first, ...rest] = value.split(' ');
this.firstName = first;
this.lastName = rest.join(' ');
}
}The setter parses "Alice Johnson" into first and last names. It works but is fragile — “Alice van der Berg” is ambiguous. Prefer read-only computed properties.
Performance: A getter runs every time it’s accessed. If the computation is expensive, consider caching.
class Data {
private _cached: number | null = null;
get expensive(): number {
return this._cached ??= this.computeExpensive();
}
private computeExpensive(): number {
// heavy work
return 42;
}
}The ??= caches the result on first access. This is a common pattern — a lazy computed property.
Why computed properties are idiomatic: They keep a single source of truth and derive everything else. No need to keep multiple fields in sync. The alternative — storing
fullNameas its own field and updating it wheneverfirstNamechanges — is error-prone. Derived values should be computed, not stored.
Validation on assignment
Setters are where you validate before storing.
class User {
private _age = 0;
get age(): number {
return this._age;
}
set age(value: number) {
if (!Number.isInteger(value)) {
throw new Error('Age must be an integer');
}
if (value < 0 || value > 150) {
throw new Error('Age out of range');
}
this._age = value;
}
}
const u = new User();
u.age = 30; // ✅
u.age = -1; // ❌ throws
u.age = 3.14; // ❌ throwsThe setter enforces the rules. Any assignment goes through it — there’s no way to bypass.
Validation patterns:
- Range checks — number within bounds
- Format checks — email, phone, etc.
- Null checks — non-null, non-empty
- Cross-field — value must be consistent with other fields
Throwing vs clamping vs ignoring: Three approaches.
// Throw
set age(v: number) {
if (v < 0) throw new Error('Negative age');
this._age = v;
}
// Clamp
set age(v: number) {
this._age = Math.max(0, Math.min(150, v));
}
// Ignore invalid
set age(v: number) {
if (v < 0) return;
this._age = v;
}Throwing is loud but forces callers to handle errors. Clamping is quiet but hides bugs. Ignoring is the worst — silently drops data. Prefer throwing or clamping deliberately.
Setters with side effects: A setter can trigger other work.
class Form {
private _dirty = false;
private _name = '';
get name() { return this._name; }
set name(v: string) {
this._name = v;
this._dirty = true; // mark form dirty
}
get isDirty() { return this._dirty; }
}Assigning form.name = 'x' sets the field and marks the form dirty. The side effect is invisible to the caller — that’s the point.
Warning about side effects: Heavy side effects in setters can surprise readers. Document them.
Why setters are good for validation: They’re the single point where a value enters the object. Putting validation there means every assignment is checked. Without a setter, external code could assign an invalid value directly. Setters close that door.
Lazy initialization
A getter can defer expensive initialization until the value is needed.
class Database {
private _connection: Connection | null = null;
get connection(): Connection {
if (!this._connection) {
this._connection = this.openConnection();
}
return this._connection;
}
private openConnection(): Connection {
// expensive setup
return new Connection();
}
}
const db = new Database();
// No connection yet
db.connection; // opens the connection
db.connection; // returns cachedThe connection opens on first access. Subsequent accesses return the cached value.
Pattern with nullish coalescing assignment:
get connection(): Connection {
return this._connection ??= this.openConnection();
}??= assigns only if _connection is null or undefined. Concise and clear.
Lazy + validation: The getter computes on demand; the setter can invalidate the cache.
class Data {
private _cached: number | null = null;
private _input = 0;
get input() { return this._input; }
set input(v: number) {
this._input = v;
this._cached = null; // invalidate cache
}
get computed(): number {
return this._cached ??= this._input * 2;
}
}Setting input clears the cache, so the next read of computed recomputes. That’s the standard lazy-with-invalidation pattern.
Why lazy init matters: Some resources are expensive to create but may not be needed. Opening a database connection, loading a config file, initializing a heavy object — a getter can defer these until the first access. That’s lazy initialization.
Why getters are the natural fit for lazy init: The getter runs on read. If the value isn’t needed, the getter never runs. If it is, the getter creates and caches it. The caller just reads a property and gets the value — the lazy behavior is invisible.
Getters and setters with readonly
A getter-only property can’t be assigned. That’s effectively readonly from the outside.
class User {
constructor(private _id: string) {}
get id(): string {
return this._id;
}
}
const u = new User('u-1');
u.id; // ✅ "u-1"
u.id = 'u-2'; // ❌ read-onlyThe _id is private; only the getter exposes it. No setter means no external assignment.
Compare with readonly:
class User {
readonly id: string;
constructor(id: string) { this.id = id; }
}readonly prevents assignment after construction but leaves the property publicly readable. A getter-only property does the same — with the option to add logic or compute the value.
When to use which:
| Need | Use |
|---|---|
| Simple immutable field | readonly |
| Computed or hidden field | Getter |
| Both read and write | Getter + setter |
| Internal-only | private or #private |
readonly and getters together:
class Config {
constructor(private readonly _apiUrl: string) {}
get apiUrl(): string {
return this._apiUrl;
}
}The backing field is readonly (can’t be reassigned even internally); the getter exposes it. Belt and suspenders.
Why getter-only instead of
readonly: When the value is computed, not stored, or when you want to hide the storage entirely.readonly id: stringexposes both the field and its name. A getter-only property exposes only the read interface — you can rename the field, change its type, or compute it, without breaking callers.
Getters, setters, and interfaces
Interfaces can declare properties that classes implement with getters and setters.
interface Named {
name: string;
}
class User implements Named {
private _name = '';
get name(): string { return this._name; }
set name(v: string) { this._name = v; }
}Named requires a name property. User provides it via getter and setter. From the interface’s perspective, it’s just a property.
Read-only in an interface:
interface Identified {
readonly id: string;
}
class User implements Identified {
get id(): string { return 'u-1'; }
}readonly in the interface means no setter. A class with just a getter satisfies it.
Write-only is not expressible: Interfaces can’t declare write-only properties. If you need one, use a method.
Why this matters: Getter/setter properties are just properties from an interface’s perspective. The interface doesn’t care how they’re implemented — the shape is what counts. This lets you swap implementations (getter, plain field, computed) without changing the interface.
Why interfaces treat getters as properties: Structural typing only sees the shape. A
name: stringin an interface is satisfied by a plain field, a getter, or a class property. The consumer doesn’t know or care which. That’s the flexibility structural typing gives you.
A full example
A bank account with validation, computed properties, and lazy initialization.
class BankAccount {
private _balance = 0;
private _history: string[] | null = null;
constructor(
private readonly _accountNumber: string,
private _owner: string
) {}
// Read-only computed
get accountNumber(): string {
return this._accountNumber;
}
// Read-only computed with formatting
get maskedAccount(): string {
return `****${this._accountNumber.slice(-4)}`;
}
// Read-only computed
get formattedBalance(): string {
return `$${this._balance.toFixed(2)}`;
}
// Read-write with validation
get owner(): string {
return this._owner;
}
set owner(value: string) {
const trimmed = value.trim();
if (trimmed.length === 0) {
throw new Error('Owner name cannot be empty');
}
this._owner = trimmed;
}
// Read-only balance
get balance(): number {
return this._balance;
}
// Lazy history
get history(): readonly string[] {
return this._history ??= [];
}
// Methods that mutate balance and history
deposit(amount: number): void {
if (amount <= 0) throw new Error('Deposit must be positive');
this._balance += amount;
this.history.push(`+${amount}`);
}
withdraw(amount: number): void {
if (amount <= 0) throw new Error('Withdrawal must be positive');
if (amount > this._balance) throw new Error('Insufficient funds');
this._balance -= amount;
this.history.push(`-${amount}`);
}
}
// Usage
const acct = new BankAccount('1234567890', 'Alice');
acct.deposit(100);
acct.deposit(50);
acct.withdraw(30);
console.log(acct.maskedAccount); // ****7890
console.log(acct.formattedBalance); // $120.00
console.log(acct.history); // ['+100', '+50', '-30']
acct.owner = ' Alice Smith ';
console.log(acct.owner); // 'Alice Smith'
// acct.balance = 1000; // ❌ read-only
// acct.owner = ''; // ❌ throwsWhat this shows:
- Read-only computed properties —
maskedAccount,formattedBalance,balance - Read-write with validation —
owner - Lazy initialization —
historycreated on first access - Private backing fields —
_balance,_owner,_accountNumber,_history - Methods that mutate —
deposit,withdraw; the balance is read-only from outside
The caller uses properties (acct.balance, acct.owner = 'x') without knowing about the logic behind them.
Why this shape: It’s a realistic class with a clean property interface. Computed values are derived; validation happens on assignment; the internal history is lazily created. The public API is simple — properties — while the implementation does real work.
Complete Example Session
# ============================================
# PART 1: BASIC GETTER AND SETTER
# ============================================
cat > basic.ts << 'EOF'
class Circle {
constructor(private _radius: number) {}
get radius(): number {
return this._radius;
}
set radius(value: number) {
if (value < 0) throw new Error('Radius must be positive');
this._radius = value;
}
get area(): number {
return Math.PI * this._radius ** 2;
}
}
const c = new Circle(5);
console.log(c.radius);
console.log(c.area.toFixed(2));
c.radius = 10;
console.log(c.area.toFixed(2));
try {
c.radius = -1;
} catch (e) {
console.log((e as Error).message);
}
EOF
npx tsc --noEmit basic.ts
# (no errors)
# ============================================
# PART 2: READ-ONLY PROPERTY
# ============================================
cat > readonly.ts << 'EOF'
class User {
constructor(private _id: string) {}
get id(): string { return this._id; }
}
const u = new User('u-1');
console.log(u.id);
// u.id = 'u-2'; // ❌ read-only
EOF
npx tsc --noEmit readonly.ts
# (no errors)
# ============================================
# PART 3: TYPE MISMATCH ERROR
# ============================================
cat > mismatch.ts << 'EOF'
class Bad {
private _value = 0;
get value(): number { return this._value; }
set value(v: string) { this._value = Number(v); } // ❌
}
EOF
npx tsc --noEmit mismatch.ts
# [ mismatch.ts:5:3 - 'get' and 'set' accessor must have the same type. ]
rm mismatch.ts
# ============================================
# PART 4: LAZY INITIALIZATION
# ============================================
cat > lazy.ts << 'EOF'
class Data {
private _cached: number | null = null;
private _input = 0;
get input() { return this._input; }
set input(v: number) {
this._input = v;
this._cached = null;
}
get computed(): number {
return this._cached ??= this._input * 2;
}
}
const d = new Data();
console.log(d.computed); // 0
d.input = 21;
console.log(d.computed); // 42
console.log(d.computed); // 42 (cached)
EOF
npx tsc --noEmit lazy.ts
# (no errors)
# ============================================
# PART 5: INTERFACE COMPATIBILITY
# ============================================
cat > iface.ts << 'EOF'
interface Named {
name: string;
}
interface Identified {
readonly id: string;
}
class User implements Named, Identified {
private _name = '';
constructor(private _id: string) {}
get name() { return this._name; }
set name(v: string) { this._name = v; }
get id() { return this._id; }
}
const u = new User('u-1');
u.name = 'Alice';
console.log(u.name, u.id);
EOF
npx tsc --noEmit iface.ts
# (no errors)
# ============================================
# PART 6: BANK ACCOUNT
# ============================================
cat > bank.ts << 'EOF'
class BankAccount {
private _balance = 0;
private _history: string[] | null = null;
constructor(
private readonly _accountNumber: string,
private _owner: string
) {}
get accountNumber() { return this._accountNumber; }
get maskedAccount() { return `****${this._accountNumber.slice(-4)}`; }
get formattedBalance() { return `$${this._balance.toFixed(2)}`; }
get balance() { return this._balance; }
get history(): readonly string[] { return this._history ??= []; }
get owner() { return this._owner; }
set owner(v: string) {
const t = v.trim();
if (t.length === 0) throw new Error('Empty owner');
this._owner = t;
}
deposit(amount: number): void {
if (amount <= 0) throw new Error('Invalid deposit');
this._balance += amount;
this.history.push(`+${amount}`);
}
withdraw(amount: number): void {
if (amount <= 0) throw new Error('Invalid withdrawal');
if (amount > this._balance) throw new Error('Insufficient');
this._balance -= amount;
this.history.push(`-${amount}`);
}
}
const acct = new BankAccount('1234567890', 'Alice');
acct.deposit(100);
acct.deposit(50);
acct.withdraw(30);
console.log(acct.maskedAccount);
console.log(acct.formattedBalance);
console.log(acct.history);
EOF
npx tsc --noEmit bank.ts
# (no errors)
# ============================================
# PART 7: COMPILE AND RUN
# ============================================
npx tsc basic.ts readonly.ts lazy.ts iface.ts bank.ts
node basic.js
# [ 5 ]
# [ 78.54 ]
# [ 314.16 ]
# [ Radius must be positive ]
node readonly.js
# [ u-1 ]
node lazy.js
# [ 0 ]
# [ 42 ]
# [ 42 ]
node iface.js
# [ Alice u-1 ]
node bank.js
# [ ****7890 ]
# [ $120.00 ]
# [ [ '+100', '+50', '-30' ] ]Quick Reference
Syntax
| Form | Example |
|---|---|
| Getter | get name(): string { } |
| Setter | set name(v: string) { } |
| Getter only | get name(): string { } |
| Setter only | set password(v: string) { } |
| Private backing | private _name = '' |
| JS private backing | #name = '' |
Usage
| Operation | Syntax |
|---|---|
| Read | obj.name |
| Write | obj.name = 'x' |
| Read-only | obj.name (write fails) |
| In class | this.name / this.name = 'x' |
Types
| Rule | Detail |
|---|---|
| Getter return | T |
| Setter parameter | T (must match) |
| Mismatch | Compile error |
| Inference | From backing field |
| Union | Allowed |
Access Modifiers
| Modifier | Effect |
|---|---|
public get | Publicly readable |
private get | Class-only read |
protected get | Class + subclasses |
static get | On the class |
| No setter | Read-only from outside |
Common Patterns
| Pattern | Purpose |
|---|---|
| Computed | Derive from fields |
| Validated | Enforce on write |
| Lazy | Cache on first read |
| Read-only | Expose without setter |
| Hidden backing | _name or #name |
| Side effect | Mark dirty, notify |
Computed vs Stored
| Aspect | Computed | Stored |
|---|---|---|
| Source | Derived on read | Field |
| Staleness | Never | Can drift |
| Performance | Recomputes | Fast read |
| Example | fullName | firstName |
Lazy Initialization
| Form | Example |
|---|---|
| If check | if (!this._x) this._x = ... |
| Nullish assign | this._x ??= ... |
| With invalidation | Setter clears cache |
Validation in Setters
| Approach | Behavior |
|---|---|
| Throw | Error on invalid |
| Clamp | Adjust to valid range |
| Ignore | Silently drop |
| Log | Record and continue |
Getter vs Method
| Aspect | Getter | Method |
|---|---|---|
| Syntax | obj.x | obj.x() |
| Purpose | Property-like | Action-like |
| Side effects | Should be none | Allowed |
| Async | ❌ | ✅ |
Interface Compatibility
| Interface | Class |
|---|---|
name: string | Getter + setter |
readonly id: string | Getter only |
| Method | Method |
| Write-only | Not expressible |
Error Cases
| Error | Cause |
|---|---|
| Type mismatch | Getter and setter differ |
| Read-only | No setter defined |
| Recursion | Getter calls itself |
| Access before init | Getter uses unset field |
readonly vs Getter-Only
| Aspect | readonly | Getter-only |
|---|---|---|
| Field exposed | ✅ | ❌ |
| Logic | ❌ | ✅ |
| Computed | ❌ | ✅ |
| Simple | ✅ | ⚠️ |
| Renameable | ❌ | ✅ |
Best Practices
✅ Do This:
// Use getters for computed properties
get fullName(): string {
return `${this.firstName} ${this.lastName}`;
} // ✅
// Use setters for validation
set age(value: number) {
if (value < 0) throw new Error('Invalid');
this._age = value;
} // ✅
// Keep getter and setter types matching
get value(): number { return this._value; }
set value(v: number) { this._value = v; } // ✅
// Use private backing fields
private _name = ''; // ✅
// Lazy initialize expensive values
get connection(): Connection {
return this._connection ??= this.open();
} // ✅
// Make computed properties read-only
get total(): number { return this.subtotal + this.tax; } // ✅
// Invalidate caches in setters
set input(v: number) {
this._input = v;
this._cached = null;
} // ✅
// Throw on invalid input in setters
set email(v: string) {
if (!v.includes('@')) throw new Error('Invalid email');
this._email = v;
} // ✅❌ Don’t Do This:
// Don't do heavy work in getters without caching
get data(): number[] {
return expensiveComputation(); // runs every read // ⚠️
}
// Don't have side effects in getters
get user(): User {
this.logAccess(); // ⚠️ side effect on read // ⚠️
return this._user;
}
// Don't mismatch getter/setter types
get value(): number { return this._value; }
set value(v: string) { } // ❌ error // ❌
// Don't expose the backing field publicly
public _name = ''; // ⚠️ defeats the purpose // ⚠️
// Don't forget to invalidate caches
get computed(): number { return this._cached!; }
set input(v: number) { this._input = v; } // ⚠️ cache stale // ⚠️
// Don't do async work in getters
async get data() { } // ❌ not valid // ❌
// Don't use getters for expensive I/O
get file(): string {
return fs.readFileSync('big.txt', 'utf8'); // ⚠️ // ⚠️
}
// Don't overload setters with logic
set x(v: number) {
this.x = v; // ❌ infinite recursion // ❌
}Common Pitfalls
| Pitfall | Problem | Solution |
|---|---|---|
| Recursive getter | Infinite loop | Use backing field |
| Type mismatch | Compile error | Match getter/setter types |
| Expensive getter | Runs every read | Cache the result |
| Side effects in getter | Surprising behavior | Move to method |
| Forget cache invalidation | Stale data | Clear in setter |
| Public backing field | Defeats encapsulation | Use private |
| Async getter | Not supported | Use a method |
| Getter with I/O | Blocks reads | Load separately |
| Setter silent drop | Hides bugs | Throw on invalid |
| Overriding getter only | Confusing | Override both or neither |
Real-World Examples
1. Basic getter
get name(): string { return this._name; }2. Basic setter
set name(v: string) { this._name = v; }3. Computed full name
get fullName(): string {
return `${this.firstName} ${this.lastName}`;
}4. Read-only property
get id(): string { return this._id; }5. Validated setter
set age(v: number) {
if (v < 0) throw new Error('Negative');
this._age = v;
}6. Clamping setter
set percent(v: number) {
this._percent = Math.max(0, Math.min(100, v));
}7. Lazy connection
get connection(): Connection {
return this._conn ??= this.connect();
}8. Lazy with invalidation
get total(): number {
return this._total ??= this.compute();
}
set items(v: Item[]) {
this._items = v;
this._total = null;
}9. Private backing field
private _value = 0;
get value() { return this._value; }10. JavaScript private field
#value = 0;
get value() { return this.#value; }11. Static getter
static get version(): string { return '1.0.0'; }12. Getter returning readonly
get items(): readonly Item[] { return this._items; }13. Setter with trim
set name(v: string) {
this._name = v.trim();
}14. Setter marking dirty
set value(v: string) {
this._value = v;
this._dirty = true;
}15. Getter computing from array
get count(): number { return this._items.length; }16. Getter with formatting
get displayPrice(): string {
return `$${this._price.toFixed(2)}`;
}17. Interface with readonly
interface Identified {
readonly id: string;
}18. Class implementing both
class User implements Named, Identified {
get name() { return this._name; }
set name(v: string) { this._name = v; }
get id() { return this._id; }
}19. Setter with cross-field validation
set endDate(v: Date) {
if (v < this._startDate) throw new Error('End before start');
this._endDate = v;
}20. Getter for formatted output
get summary(): string {
return `${this.name}: ${this.count} items`;
}Visual: Getter and Setter Flow
┌──────────────────────────────────────────────┐
│ Caller │
│ │
│ const r = circle.radius; │
│ │ │
│ ▼ │
│ get radius() { return this._radius; } │
│ │
└──────────────────────────────────────────────┘
┌──────────────────────────────────────────────┐
│ Caller │
│ │
│ circle.radius = 10; │
│ │ │
│ ▼ │
│ set radius(v) { │
│ if (v < 0) throw ...; │
│ this._radius = v; │
│ } │
│ │
└──────────────────────────────────────────────┘Visual: Computed Property
┌──────────────────────────────────────────────┐
│ Stored fields: │
│ ─ firstName = 'Alice' │
│ ─ lastName = 'Johnson' │
│ │
│ Computed getter: │
│ get fullName() { │
│ return `${firstName} ${lastName}`; │
│ } │
│ │
│ Access: │
│ user.fullName → 'Alice Johnson' │
│ │
│ Change firstName: │
│ user.firstName = 'Bob' │
│ user.fullName → 'Bob Johnson' │
│ │
│ No stale data — computed on read │
│ │
└──────────────────────────────────────────────┘Visual: Validation Flow
┌──────────────────────────────────────────────┐
│ user.age = -5 │
│ │ │
│ ▼ │
│ set age(v: number) { │
│ if (v < 0) throw new Error('...'); │
│ this._age = v; │
│ } │
│ │ │
│ ▼ │
│ ❌ Error thrown — value not stored │
│ │
└──────────────────────────────────────────────┘
┌──────────────────────────────────────────────┐
│ user.age = 30 │
│ │ │
│ ▼ │
│ set age(v: number) { │
│ if (v < 0) throw ...; │
│ this._age = v; │
│ } │
│ │ │
│ ▼ │
│ ✅ _age = 30 │
│ │
└──────────────────────────────────────────────┘Visual: Lazy Initialization
┌──────────────────────────────────────────────┐
│ First access: │
│ │
│ db.connection │
│ │ │
│ ▼ │
│ get connection() { │
│ return this._conn ??= this.open(); │
│ } │
│ │ │
│ ▼ │
│ _conn === null → open() runs → cached │
│ │
└──────────────────────────────────────────────┘
┌──────────────────────────────────────────────┐
│ Subsequent access: │
│ │
│ db.connection │
│ │ │
│ ▼ │
│ _conn already set → returned directly │
│ │
└──────────────────────────────────────────────┘Visual: readonly vs Getter-Only
┌──────────────────────────────────────────────┐
│ readonly id: string │
│ │
│ ─ Public field │
│ ─ Assignable only in constructor │
│ ─ Simple │
│ ─ Field name exposed │
│ │
└──────────────────────────────────────────────┘
┌──────────────────────────────────────────────┐
│ get id(): string │
│ │
│ ─ Computed or hidden │
│ ─ Backing field private │
│ ─ Renameable │
│ ─ Can add logic │
│ │
└──────────────────────────────────────────────┘Visual: Cache Invalidation
┌──────────────────────────────────────────────┐
│ class Data { │
│ private _input = 0; │
│ private _cached: number | null = null; │
│ │
│ get input() { return this._input; } │
│ │
│ set input(v: number) { │
│ this._input = v; │
│ this._cached = null; ← invalidate │
│ } │
│ │
│ get computed(): number { │
│ return this._cached ??= this._input * 2;│
│ } │
│ } │
│ │
└──────────────────────────────────────────────┘
┌──────────────────────────────────────────────┐
│ Sequence: │
│ │
│ d.input = 21 → invalidate cache │
│ d.computed → recompute → 42 → cache │
│ d.computed → return cached → 42 │
│ d.input = 10 → invalidate cache │
│ d.computed → recompute → 20 → cache │
│ │
└──────────────────────────────────────────────┘Visual: Common Error — Recursion
┌──────────────────────────────────────────────┐
│ ❌ Infinite recursion │
│ │
│ get name() { │
│ return this.name; // calls itself │
│ } │
│ │
│ → Stack overflow │
│ │
└──────────────────────────────────────────────┘
┌──────────────────────────────────────────────┐
│ ✅ Correct │
│ │
│ private _name = ''; │
│ │
│ get name() { │
│ return this._name; // backing field │
│ } │
│ │
└──────────────────────────────────────────────┘Visual: Interface Compatibility
┌──────────────────────────────────────────────┐
│ interface Named { name: string; } │
│ │
│ Satisfied by: │
│ │
│ ─ public name = '' │
│ ─ get name() + set name() │
│ ─ get name() only (if readonly) │
│ │
│ Any of these works │
│ │
└──────────────────────────────────────────────┘
┌──────────────────────────────────────────────┐
│ interface Identified { readonly id: string; }│
│ │
│ Satisfied by: │
│ │
│ ─ readonly id: string │
│ ─ get id() only │
│ │
│ No setter required │
│ │
└──────────────────────────────────────────────┘Visual: Decision Flow
┌──────────────────────────────────────────────┐
│ Is the value derived from other fields? │
│ │ │
│ ├── Yes ──► Getter (read-only) │
│ │ │
│ └── No │
│ │ │
│ ├── Need validation on write? │
│ │ │ │
│ │ ├── Yes ──► Getter+Setter │
│ │ │ │
│ │ └── No ──► Plain field │
│ │ │
│ └── Need lazy init? │
│ │ │
│ └── Yes ──► Getter with │
│ cache │
│ │
└──────────────────────────────────────────────┘Visual: Property Access Comparison
┌──────────────────────────────────────────────┐
│ Plain field │
│ │
│ class C { name = ''; } │
│ │
│ c.name; ← direct read │
│ c.name = 'x'; ← direct write │
│ │
│ No logic, no validation │
│ │
└──────────────────────────────────────────────┘
┌──────────────────────────────────────────────┐
│ Getter + setter │
│ │
│ class C { │
│ private _name = ''; │
│ get name() { return this._name; } │
│ set name(v: string) { this._name = v; } │
│ } │
│ │
│ c.name; ← runs getter │
│ c.name = 'x'; ← runs setter │
│ │
│ Full logic, validation, computed values │
│ │
└──────────────────────────────────────────────┘Summary
| Concept | Meaning |
|---|---|
| Getter | get name() — runs on read |
| Setter | set name(v) — runs on write |
| Computed property | Derived from other fields |
| Read-only | Getter without setter |
| Validation | Setter enforces rules |
| Lazy initialization | Compute on first read |
| Cache invalidation | Setter clears cached value |
| Backing field | _name or #name — private storage |
| Type match | Getter and setter must have same type |
Key takeaways:
- Getters run on property read; setters run on property write
- Callers use property syntax —
obj.x, notobj.x() - Getter and setter types must match — TypeScript enforces it
- Computed properties derive values from other fields — no stale data
- Setters validate — the single point where values enter
- Lazy initialization — defer expensive work until first access
- Cache invalidation — clear the cache in the setter that changes the input
- Getter-only makes a property read-only from outside
- Use private backing fields (
_nameor#name) to hide storage - Interfaces treat getters as plain properties — no special syntax
- Avoid heavy work in getters without caching — they run on every read
- Avoid side effects in getters — reads should be pure
- Setters can have side effects — marking dirty, notifying, invalidating
Remember: Getters and setters let a property look simple while doing real work. Use getters for computed values, lazy initialization, and read-only exposure. Use setters for validation, cache invalidation, and marking state. Keep them typed consistently, avoid heavy work on read, and don’t create infinite loops by returning the property itself. When the property is genuinely simple, a plain field is better — getters and setters are for when the property needs to behave like more than a slot.
Stop using slow, ad-bloated tool sites! 🤮
🔎 Search “KandZ Tools” on Google to use many professional utilities for free.
KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)
⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free
🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!