autoproperty

Reactive, non dirty checking Change-Detection for mutable objects

Problem

How to fast detect if a property of a class changed it's value ?

    class Person {
        name: string;
    }
 
    var p = new Person();
    p.name = 'John';
 
    // There is no way we can get informed that the name has changed

Example

Using typescript annotations, we automagically create getter and setter out of a normal property to detect changes in the setter and feed a subject which can be subscribed to.

    import {autoproperty, NotifyPropertyChanged, PropertyChangedEventArgs, PropertyChangedEventArgsGeneric} from 'autoproperty';
 
    class Person extends NotifyPropertyChanged {
        @autoproperty
        name: string;
    }
 
    var p = new Person();
    p.name = 'John';
 
    p.propertyChanged.subscribe((args: PropertyChangedEventArgs) => {
        console.log(args.propertyName + ' changed from ' + args.oldValue + ' to ' + args.newValue);
    });

Under the hood

What has been done by the autoproperty annotation ?

This:

    class Person extends NotifyPropertyChanged {
        @autoproperty
        name: string;
    }

gets transformed into:

    class Person extends NotifyPropertyChanged {
        _name: string;
 
        get name(): string {
            return this._name;
        }
 
        set name(newValue: string) {
            var oldValue = this._name;
            this._name = newValue;
            this.propertyChanged.next('name', oldValue, newValue);
        }
    }

Getter and setter and a "hidden" field are automagically created.

Manually creating a setter that feeds the propertyChanged stream

If you already have a setter or want to manually create one and want the propertyChanged stream to notify just feed the stream like this:

    this.onPropertyChanged(<keyName>, <oldValue>, <newValue>);

Replacing keyName with the name of the setter, oldValue with the previous Values and newValue with the new value.

Restrictions (and ToDo's)

• Resursive. An autoproperty cannot have itself as a property (endless loop of typescript annotation)