> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.
# TypeScript Auto-Accessor Field
An auto-accessor field is a class property declaration prefixed with the `accessor` keyword that automatically generates a private backing field along with a corresponding getter and setter pair on the class prototype. Introduced to align TypeScript with the ECMAScript Class Accessors proposal, it provides a standardized mechanism for property interception, specifically designed to be targeted by class decorators.
## Syntax
The `accessor` modifier is placed before the property name, optionally accompanied by a type annotation and an initial value.
```typescript theme={"dark"}
class Entity {
accessor identifier: string = "unassigned";
}
```
## Underlying Mechanics
When the TypeScript compiler processes an auto-accessor, it desugars the single declaration into three distinct components:
1. A private, uniquely named backing field on the class instance.
2. A `get` method on the class prototype.
3. A `set` method on the class prototype.
Conceptually, the previous syntax is transpiled to the following equivalent structure:
```typescript theme={"dark"}
class Entity {
// 1. Private backing field (instance-bound)
#identifier: string = "unassigned";
// 2. Prototype getter
get identifier(): string {
return this.#identifier;
}
// 3. Prototype setter
set identifier(value: string) {
this.#identifier = value;
}
}
```
## Technical Characteristics
* **Memory Allocation:** Unlike standard class fields which are defined directly on the instance (`this.propertyName`), the auto-accessor defines its getter and setter on the prototype chain. Only the hidden backing field consumes per-instance memory.
* **Initialization Phase:** The default value assigned to an auto-accessor is evaluated and bound to the private backing field during the instance initialization phase, immediately prior to the execution of the constructor body.
* **Decorator Metadata:** When a decorator is applied to an `accessor` field, the decorator's context receives a `ClassAccessorDecoratorContext`. Instead of receiving a standard property descriptor, the decorator receives an object containing `get` and `set` functions. This allows the decorator to wrap or mutate the accessor logic directly without needing to manually redefine the property descriptor using `Object.defineProperty`.
## Interface Implementation
Auto-accessors satisfy interface requirements identically to standard properties or explicit getter/setter pairs. The interface only dictates the public contract, remaining agnostic to the underlying `accessor` implementation.
```typescript theme={"dark"}
interface IEntity {
identifier: string;
}
class User implements IEntity {
// Satisfies the interface contract via prototype accessors
accessor identifier: string;
constructor(id: string) {
this.identifier = id;
}
}
```
Tired of Poor TypeScript Skills? Fix That With Deep Grasping!
Learn More
