TypeScript React项目中如何获取JSON数据的指定字段子集？

报错原因 #

出现TS7053错误的核心是两个类型推断问题：

1. fields数组默认被推断为string[]类型，TypeScript无法保证数组元素都是data1上存在的合法键
2. reduce的初始值{}被推断为空对象类型，没有对应索引签名支持动态添加属性

解决方案 #

方案1：基础类型标注（兼顾安全与易用性）

先给数据和字段增加明确的类型约束即可：

// 定义data的基础类型
type Data = typeof data1;
// 限定fields的元素只能是Data的合法键
const fields: Array<keyof Data> = ["id", "tcreated", "Custname"];

// 给reduce初始值指定Partial类型兼容动态赋值
const subset = fields.reduce((a, e) => {
  a[e] = data1[e];
  return a;
}, {} as Partial<Data>);

如果需要返回的子集属性都是必选，可以将Partial<Data>替换为Pick<Data, 'id'|'tcreated'|'Custname'>。

方案2：通用工具函数封装（适合高频复用）

可以封装一个通用的字段拾取函数，一次定义到处使用，自动推导返回类型：

function pick<T extends object, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
  return keys.reduce((acc, key) => {
    if (obj.hasOwnProperty(key)) {
      acc[key] = obj[key];
    }
    return acc;
  }, {} as Pick<T, K>);
}

// 调用方式
const subset = pick(data1, ["id", "tcreated", "Custname"]);

该方案会自动校验传入的字段是否合法，类型安全度最高。

方案3：临时绕过校验（仅应急使用）

如果仅临时调试不需要严格类型检查，可以用类型断言直接绕过：

const subset = fields.reduce((a, e) => ((a[e] = (data1 as any)[e]), a), {} as any);

该方案会丢失类型提示，不建议在正式业务代码中使用。

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