TypeScript使用reduce返回仅含可选字段类型时报错如何解决

错误原因 #

报错的核心是TypeScript对全可选属性接口的动态键赋值有严格的推导限制：

• 你定义的UserData所有字段都是可选属性，每个字段的类型都是string | undefined
• 当你用rawData.fieldName as keyof UserData这种动态索引访问属性时，TypeScript无法确定你具体操作的是哪个字段，只会统一将目标位置的类型判定为string | undefined，在严格校验模式下，直接给这个位置赋值字符串会被判定为类型不兼容，触发你遇到的报错。
• 额外风险：直接将rawData.fieldName强转为keyof UserData，TypeScript无法校验运行时传入的字段名是否真的属于UserData的合法字段，存在类型安全隐患。

解决方案 #

方案1：临时类型断言（快速修复） #

如果你的业务逻辑已经能保证传入的fieldName一定是UserData的合法字段，可以直接在赋值位置加类型断言，告诉TypeScript你明确知晓该位置可接收字符串：

(userData[rawData.fieldName as keyof UserData] as string) = formatField(rawData.fieldValue);

方案2：通过Object.assign赋值（更简洁） #

改用Object.assign给累计对象添加属性，TypeScript对这种方式的动态属性赋值检查更宽松，不需要额外写断言：

function format(rawDataList: RawData[]): UserData {
  return rawDataList.reduce<UserData>((userData, rawData) => {
    return Object.assign(userData, {
      [rawData.fieldName]: formatField(rawData.fieldValue)
    });
  }, {});
}

方案3：增加字段合法性校验（类型最安全） #

如果要完全规避类型安全问题，可以先定义UserData的合法字段白名单，赋值前先做校验，既解决报错也能避免运行时出现非法字段：

// 定义UserData的合法字段列表
const USER_FIELD_LIST: Array<keyof UserData> = ['email', 'phone'];

function format(rawDataList: RawData[]): UserData {
  return rawDataList.reduce<UserData>((userData, rawData) => {
    const fieldName = rawData.fieldName as keyof UserData;
    // 仅处理合法字段
    if (USER_FIELD_LIST.includes(fieldName)) {
      (userData[fieldName] as string) = formatField(rawData.fieldValue);
    }
    return userData;
  }, {});
}

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