动态设置响应式属性时如何正确处理TypeScript类型报错？

方案一：用keyof约束参数类型 #

如果你的settings属性是固定的，只允许修改已存在的属性，直接用keyof typeof settings限定property的类型，既消除报错还能做合法键校验：

const settings = reactive({
  name: 'hello'
});

// 限制property只能是settings的有效键
const setProperty = (property: keyof typeof settings) => { 
  settings[property] = 'new value';
}

方案二：给对象添加索引签名（支持动态新增属性） #

如果需要动态添加未知的字符串属性，先给settings定义带索引签名的接口，再传给reactive做类型标注：

// 定义包含索引签名的接口
interface Settings {
  name: string;
  // 允许任意字符串键，值类型为string
  [key: string]: string;
}

const settings = reactive<Settings>({
  name: 'hello'
});

const setProperty = (property: string) => { 
  settings[property] = 'new value';
}

报错原因说明 #

reactive会根据初始值推断出settings的类型为{ name: string }，而property是宽泛的string类型，TypeScript无法确认这个字符串是否是settings的合法键，所以抛出"无法用string类型索引"的错误。上面两种方案都能在保留类型检查的前提下解决问题，比断言成any更安全。

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