I wanted to create a short documentation and explain the principle of Angular Signals using JavaScript proxies in an example. Then the question came up: could I quickly write it in TypeScript and set up the types? I said, of course, no problem, but then, surprise—somehow the types didn’t fit anymore.

How can I use the correct types e.g. in:

target[property as keyof StateType] = value as StateType[keyof StateType];

outputs an error:

Type 'string | number' is not assignable to type 'never'.
  Type 'string' is not assignable to type 'never'.(2322)

This is the whole example (Online TS Playground):

type StateType = {
    count: number;
    name: string;
};

const state: StateType = {
    count: 0,
    name: 'React'
};

function onStateChange<K extends keyof StateType>(property: K, value: StateType[K]): void {
    console.log(`The property "${property}" was changed to "${value}"`);
}

const handler: ProxyHandler<StateType> = {
    set(target, property, value) {
        if (property in target) {
            target[property as keyof StateType] = value as StateType[keyof StateType];
            onStateChange(property as keyof StateType, value as StateType[keyof StateType]);
            return true;
        }
        return false;
    }
};

const proxyState = new Proxy(state, handler);

proxyState.count = 1; 
proxyState.name = 'Angular';