TypeScript中find获取对象键后访问属性报错的解决方案咨询

问题说明 #

打印value.test时触发TypeScript错误，原因是TypeScript无法确认find方法返回的result是DATA对象的有效键。尝试过类型断言、映射类型仍无法消除错误，需求是为每个对象定义独立输入，不清楚如何通过.find传递泛型。

示例代码 #

const DATA = {
  name: {
    label: "test",
    test: 123,
    baba: 12,
  },
  example: {
    abc: "abc",
    abs: "asd"
  },
  gender: "Male"
}

const testName = "name"
const result = Object.keys(DATA).find((d: string) => d === testName)
const value = DATA[result as keyof typeof DATA];

console.log(value.test);

解决方案 #

核心问题在于Object.keys()返回类型是string[]而非(keyof typeof DATA)[]，且find可能返回undefined，导致value被推断为所有DATA值类型的联合，而联合类型中仅name对应的对象拥有test属性，因此访问该属性会触发错误。以下是几种可行的解决方式：

方式1：用类型守卫缩小返回值类型 #

通过自定义类型守卫，让TypeScript明确find返回的是目标键类型，再结合判断排除undefined：

const testName = "name" as const;
const result = Object.keys(DATA).find((d): d is typeof testName => d === testName);
if (result) {
  const value = DATA[result];
  console.log(value.test); // 此时TypeScript能确定value是DATA['name']类型
}

方式2：泛型函数封装查找逻辑 #

如果需要复用查找逻辑，可封装泛型函数约束键的类型，确保返回值类型精准：

function findKey<T extends object, K extends keyof T>(obj: T, key: K): K | undefined {
  return Object.keys(obj).find(d => d === key) as K | undefined;
}

const testName = "name" as const;
const result = findKey(DATA, testName);
if (result) {
  const value = DATA[result];
  console.log(value.test);
}

方式3：直接使用字面量类型（确定场景下） #

若能100%确认testName是DATA的有效键，可直接跳过find，让TypeScript精准推断类型：

const testName = "name" as const;
const value = DATA[testName];
console.log(value.test);

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