如何在TypeScript中为类Angular Signals响应式状态管理正确类型化Proxy处理器

我原本想用JavaScript Proxy实现类似Angular Signals的状态监听逻辑，转成TypeScript后遇到了类型错误。具体是这段代码：

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

抛出了错误：Type 'string | number' is not assignable to type 'never'. Type 'string' is not assignable to type 'never'.(2322)

原代码如下：

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'; 

错误原因 #

你用了太宽泛的类型断言：StateType[keyof StateType]是string | number的联合类型，但target[property]的实际类型是对应具体键的单一类型（比如count对应number，name对应string）。联合类型无法直接赋值给单一类型，TypeScript因此推断目标类型为never，导致报错。

解决方案 #

给Proxy的set方法添加泛型约束，让TypeScript明确property和value的类型是一一对应的：

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方法添加泛型K，约束property和value的对应关系
    set<K extends keyof StateType>(target: StateType, property: K, value: StateType[K]): boolean {
        if (property in target) {
            target[property] = value; // 无需额外断言，类型已匹配
            onStateChange(property, value); // 直接传入，类型完全兼容
            return true;
        }
        return false;
    }
};

const proxyState = new Proxy(state, handler);

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

修正说明 #

通过给set方法添加泛型K extends keyof StateType，让TypeScript知道：

• property是StateType中的某个具体键
• value是该键对应的精确类型

这样就不需要再用宽泛的类型断言，TypeScript能正确推断类型，解决了never类型的赋值错误。

内容的提问来源于stack exchange，提问作者Webia1