Comprehensive Guide to Getters and Setters in TypeScript

Basic Syntax of TypeScript Accessors

TypeScript employs getter/setter syntax similar to ECMAScript4/ActionScript3, providing fine-grained access control for class properties. The fundamental syntax structure is as follows:

class ExampleClass {
    private _property: type = initialValue;
    
    get property(): type {
        return this._property;
    }
    
    set property(value: type) {
        this._property = value;
    }
}

This syntax allows developers to use getters and setters as if they were regular properties, while implementing complete access control mechanisms under the hood. The getter method is automatically invoked when reading property values, and the setter method is called when setting property values.

Compilation Target Requirements and JavaScript Output

To utilize TypeScript's getter/setter functionality, the compilation target must be set to ECMAScript 5 or higher. When using the command-line compiler:

tsc --target ES5

In Visual Studio, corresponding TypeScript compilation flags need to be added to the project configuration. Different compilation targets produce varying JavaScript code:

When targeting ES5, the TypeScript compiler uses Object.defineProperty() to implement accessors:

var ExampleClass = (function () {
    function ExampleClass() {
        this._property = initialValue;
    }
    Object.defineProperty(ExampleClass.prototype, "property", {
        get: function () {
            return this._property;
        },
        set: function (value) {
            this._property = value;
        },
        enumerable: true,
        configurable: true
    });
    return ExampleClass;
})();

When targeting ECMAScript 2017 or later, the output code more closely resembles the original TypeScript syntax:

class ExampleClass {
    constructor() {
        this._property = initialValue;
    }
    get property() {
        return this._property;
    }
    set property(value) {
        this._property = value;
    }
}

Practical Usage Examples

Accessors are used identically to regular properties:

const instance = new ExampleClass();
if (instance.property) {        // Invokes getter
    instance.property = newValue; // Invokes setter with new value
}

This syntactic sugar makes code more intuitive while maintaining complete access control capabilities.

Data Validation and Business Logic

The primary advantage of setter methods is the ability to perform data validation before assignment. The following example demonstrates age property validation logic:

class Person {
    private _age: number;
    
    get age(): number {
        return this._age;
    }
    
    set age(value: number) {
        if (value <= 0 || value >= 200) {
            throw new Error('Age must be between 1 and 199');
        }
        this._age = value;
    }
}

This pattern avoids repeating validation logic throughout the codebase, ensuring data consistency and integrity.

Readonly Property Implementation

By providing only a getter without a setter, readonly properties can be created:

class ReadOnlyExample {
    private _immutableValue: string = "constant";
    
    get immutableValue(): string {
        return this._immutableValue;
    }
    // No setter makes the property readonly
}

The TypeScript compiler can automatically infer this pattern and mark it as readonly when generating type definition files.

Complex Property Computation

Getter methods can be used for computed properties. The following example demonstrates full name property implementation:

class Person {
    private _firstName: string;
    private _lastName: string;
    
    get fullName(): string {
        return `${this._firstName} ${this._lastName}`;
    }
    
    set fullName(name: string) {
        const parts = name.split(' ');
        if (parts.length !== 2) {
            throw new Error('Name format must be: first last');
        }
        this._firstName = parts[0];
        this._lastName = parts[1];
    }
}

This pattern allows properties to have complex get and set logic while maintaining a clean usage interface.

Interaction with Interfaces and Types

Getters/setters work well with TypeScript's interface system:

interface IExample {
    readonly computedProperty: string;
    readonly optionalProperty?: string;
}

class ImplementationClass implements IExample {
    get computedProperty(): string {
        return "computed value";
    }
    // Optional properties can be implemented when needed
}

This design pattern supports flexible interface implementation, allowing classes to selectively provide interface-required properties.

Accessors in Inheritance

In inheritance hierarchies, subclasses can override base class accessors:

class BaseClass {
    protected _value: number = 0;
    
    get value(): number {
        return this._value;
    }
    
    set value(v: number) {
        this._value = v;
    }
}

class DerivedClass extends BaseClass {
    get value(): number {
        // Additional logic can be added
        return super.value * 2;
    }
    
    set value(v: number) {
        // Validation or transformation logic can be added
        super.value = Math.max(0, v);
    }
}

Performance Considerations and Best Practices

While getters/setters provide powerful encapsulation capabilities, they may be overkill in simple scenarios. If you're only reading and writing property values directly, using public properties might be more appropriate. Accessors should be used in the following situations:

• When data validation is required
• When property access logging is needed
• When property values need computation or transformation
• When implementing lazy loading
• When maintaining backward compatibility

By appropriately using TypeScript's getters and setters, developers can build secure and flexible object-oriented systems that enhance code maintainability and robustness.