Watch for Object Changes with JavaScript by Typescript

index.ts

// Event Source
type propEvent<Type> = {
    on<Key extends string & keyof Type>(
        eventName: `${Key}Changed`,
        callback: (newValue: Type[Key]) => void): void;
};

function makeWatchedObject<Type>(obj: Type): Type & propEvent<Type> {
    const cbMap = new Map<string, Function>();
    var proxy = new Proxy({
        ...obj,
        on<Key extends string & keyof Type>(eventName: `${Key}Changed`, callback: (newValue: Type[Key]) => void): void {
            const name = eventName.replace("Changed", "");
            cbMap.set(name, callback);
        },
    }, {
        set: function (target, propKey: string, value) {
            const fn = cbMap.get(propKey);
            fn && fn(value);
            return Reflect.set(target, propKey, value);
        }
    })
    return proxy;
}

// how to Use
const obj = makeWatchedObject({
    firstName: 'Aaron',
    age: 36
});

// newValue type is string
obj.on('firstNameChanged', (newValue) => {
    console.log('name changed ->', newValue);
});

// newAge type is number
obj.on('ageChanged', (newAge) => {
    console.log('age changed ->', newAge);
});

obj.firstName = 'Zhang';
obj.age = 25;