TypeScript对象字面量查找调用set方法类型不匹配如何解决

错误原因 #

TypeScript 无法将map函数的入参filter枚举值和返回对象的fetch返回值、set入参类型做关联绑定，默认推导的返回值是所有分支的联合类型，因此会判定fetch返回的UsersResponse可能传入接收FirmsResponse的set方法，触发类型不兼容报错。

解决方案 #

方案1：泛型约束实现类型关联

先定义枚举和返回值的映射类型，再将map函数泛型化，让入参类型和返回值类型绑定，实现类型安全：

// 定义Filter枚举对应返回值的类型映射
type FilterMap = {
  [Filter.USERS]: {
    fetch: () => Promise<{ data: UsersResponse }>
    set: (value: Maybe<UsersResponse>) => void
  }
  [Filter.FIRMS]: {
    fetch: () => Promise<{ data: FirmsResponse }>
    set: (value: Maybe<FirmsResponse>) => void
  }
}

// 泛型化map函数，入参和返回值类型绑定
const map = <T extends Filter>(filter: T): FilterMap[T] => {
  return {
    [Filter.USERS]: {
      fetch: async () => getUsers(),
      set: setUsers,
    },
    [Filter.FIRMS]: {
      fetch: async () => getFirms(),
      set: setFirms,
    }
  }[filter] as FilterMap[T];
}

改造后调用原有逻辑不会再触发类型报错。

方案2：封装调用逻辑简化代码

如果不需要在外部单独调用fetch和set，可以直接把请求+赋值的逻辑封装到查找项内部，无需额外类型定义即可解决问题：

const map = (filter: Filter) => {
  return {
    [Filter.USERS]: {
      load: async () => {
        const res = await getUsers();
        setUsers(res.data);
      }
    },
    [Filter.FIRMS]: {
      load: async () => {
        const res = await getFirms();
        setFirms(res.data);
      }
    }
  }[filter];
}

// 外部调用无需处理类型匹配
await map(filter).load();

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