TypeScript动态设置属性报错：为何使用any也无法修复？

报错原因 #

1. 联合类型的key与value无绑定关系 #

你的setAttr方法中，key是keyof DemoAttr<T>（即"attr" | "a" | "b"），value是DemoAttr<T>[keyof DemoAttr<T>]（即Demo<T> | boolean | string）。这两个类型是独立的联合类型，TypeScript无法保证传入的key和value一一匹配：比如你可能传入key="a"（对应属性类型boolean），但value却传了string，这种赋值存在类型安全问题，因此TypeScript会直接报错阻止。

2. 循环类型的严格检查 #

Demo<T>实现了DemoAttr<T>，而DemoAttr<T>里的attr属性又是Demo<T>类型，形成了循环类型引用。你把this.attr初始化为{} as Demo<T>本身就存在类型断言的不安全，再加上联合类型赋值的不匹配，双重问题叠加，即使把value改成any，TypeScript的严格检查也不会放过这种循环类型下的赋值操作。

为什么移除b属性且value设为any时能正常运行 #

移除b属性后，DemoAttr<T>的属性只剩attr和a，联合类型的分支减少。当把value设为any时，TypeScript会放宽类型检查，any可以兼容所有类型，同时循环类型的赋值在any的兜底下，类型冲突的矛盾被掩盖，所以报错消失。但这种写法本质上是绕过了类型检查，存在安全隐患。

修复方案 #

通过泛型约束让key和value的类型严格绑定，确保传入的value类型完全匹配key对应的属性类型，同时解决循环类型的赋值问题：

export interface DemoAttr<T> {
    attr: Demo<T>
    a: boolean
    b: string
}

export class Demo<T> implements DemoAttr<T>{
    attr = {} as Demo<T>
    a = false
    b = ''
    
    // 用泛型K绑定key和对应的value类型
    setAttr<K extends keyof DemoAttr<T>>(key: K, value: DemoAttr<T>[K]) {
        // 断言this.attr为DemoAttr<T>，因为Demo<T>实现了该接口，属性完全一致
        (this.attr as DemoAttr<T>)[key] = value
    }
}

这样修改后，TypeScript能确保每次赋值的value类型都和key对应的属性类型一致，同时通过类型断言解决循环类型的赋值检查问题，既保留了类型安全，又实现了动态设置属性的需求。

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