Vue.set类型推断错误及Vuex模块TypeScript赋值问题咨询

我来帮你搞定这两个头疼的类型问题，直接上实用方案：

1. Vue.set 被TypeScript推断为错误类型的问题 #

Vue.set（或者组件里的this.$set）在TS里偶尔会出现类型推断跑偏的情况，尤其是操作带索引签名的对象时——TS没法自动精准识别目标对象、键和值的具体类型。

解决办法：手动指定泛型参数 #

你可以给Vue.set显式传入泛型类型，把目标对象类型、键类型、值类型都明确告诉TS：

// 比如给state里的offices添加/更新Office对象
Vue.set<Organization['offices'], string, Office>(state.offices, item.id.toString(), item);

要是在组件内用this.$set，写法差不多：

this.$set<Organization['offices'], string, Office>(this.org.offices, officeId, newOffice);

另外提一句，如果你用的是Vue 3，Vue.set已经被弃用了，直接用原生的赋值或者Reflect.set就行，Vue 3的响应式系统支持直接修改，还能避开不少类型坑。

2. Mutation中obj[key] = newobj的类型问题 #

看你的接口定义，Organization里的[key: string]: any索引签名可能会让TS放松类型检查，再加上如果key的类型没明确约束，就容易出类型不匹配的问题。

第一步：优化接口定义（推荐） #

如果Organization不需要任意字符串键的属性，最好把[key: string]: any删掉，这样TS能帮你做更严格的类型校验：

export interface Organization {
  id: number;
  name: string;
  offices: { [key: string]: Office };
}

第二步：明确key类型并约束赋值 #

在mutation里，先确保key是string类型（比如把item的id转成字符串），同时保证newobj完全符合Office类型。要是还是有类型报错，用类型断言明确一下：

// 先定义好state的接口，假设是继承自Organization
export interface OrganizationState extends Organization {}

const setOffice = (state: OrganizationState, item: Office) => {
  // 把item的id转成string类型的key
  const officeKey = item.id.toString();
  // 直接赋值，正常情况下TS能正确识别类型
  state.offices[officeKey] = item;

  // 万一还是报错，用类型断言兜底
  (state.offices as Record<string, Office>)[officeKey] = item;
};

要是你的key是外部传进来的，一定要先验证它的类型是string再赋值，避免类型不兼容的问题。

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