TypeScript 根据传递的键推断值类型

Question

我遇到了一个减速器函数的典型化问题，该函数旨在更新存储在切片中的 userData 的任何给定属性。它需要一个包含键和值的数组，其中键应为 TUserData 类型，值应为 TUserData 中相应键的指定类型。

这是减速机：

updateUserProp(state, action: { payload: [keyof TUserData, TUserData[keyof TUserData]]; type: string }) {
      const [key, value] = action.payload;

      state.userData![key] = value;
},

这是 TUserData 类型

type TUserData = {
    email: string;
    uid: string;
    username: string;
    firstName: string;
    lastName: string;
    phoneNumber: string;
    createdOn: string;
    initials?: string;
    status: EUserStatus;
    profilePhoto?: string;
    chats?: { [x: string]: EChatStatus };
    messagesSent?: { [x: string]: boolean };
}

错误

输入“字符串|” { [x：字符串]：EChatStatus； } | { [x：字符串]：布尔值； } | undefined' 不可分配给类型 'string & EUserStatus & （WritableDraft<{ [x: string]: EChatStatus; }> | 未定义）& （WritableDraft<{ [x: string]: boolean; }> | 未定义）'。类型 “未定义”不可分配给类型“string & EUserStatus &” （WritableDraft<{ [x: string]: EChatStatus; }> | 未定义）& （WritableDraft<{ [x: string]: boolean; }> | 未定义）'.

来自这行代码

state.userData![key] = value;

虽然我确实理解它的含义以及为什么我得到它，但我找不到适用于我的情况的解决方案，也找不到合适的替代方案。如果能提供解释和解决方案建议，我们将不胜感激。

Answer 1

您可以使用受keyof TUserData约束的

泛型类型参数

，以便编译器可以推断出特定的键，如下所示：

TS游乐场

function updateUserProp<K extends keyof TUserData>(
  state: { userData?: TUserData },
  action: {
    payload: [K, TUserData[K]];
    type: string;
  },
) {
  const [key, value] = action.payload;
  state.userData![key] = value;
}