Not Pictured: Mangoes

    autoproperty
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.12 • Public • Published

    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)

    Install

    npm i autoproperty

    DownloadsWeekly Downloads

    13

    Version

    1.1.12

    License

    MIT

    Last publish

    Collaborators

    • nickwinger