typescript - 如何在不求助于 'any' 的情况下键入此函数

Question

我有这个函数，它接受一个对象和两个字符串，并返回一个类型化对象数组，使用这些字符串从提供的对象中选择两个属性。

我的编译器警告 Element implicitly has an 'any' type because type '{}' has no index signature. 对于映射函数内的两行。

export interface SelectOption {
  value: string;
  label: string;
}

/**
 * Map an array of objects to an array of objects compatible with select drop downs
 * specifying the keys to be used for the value and the label
 * @param items the object to map from
 * @param valueField The field in the object containing the value
 * @param labelField The field in the object containing the label
 */
export const mapObjectsToSelectOptions = (
  items: object[],
  valueField: string,
  labelField: string,
): SelectOption[] => {
  return items
    .map(o => ({
      value: o[valueField],
      label: o[labelField],
    }));
};

在 Typescript 中有什么办法解决这个问题吗？我试过为 items 参数创建一个类型，如下所示:

interface ObjectBase {
  [key: string]: string;
}

当然，提供的对象可能没有这样的类型，所以我在调用该函数时出错。我能以某种方式使用泛型吗？

Answer 1

您需要使 mapObjectsToSelectOptions 通用，具有 3 个类型参数:一个用于确切的对象类型 T，另外两个用于两个字段名称:用于值和用于标签, 命名为 VF 和 LF。然后编译器可以将值类型推断为T[VF]，并将标签类型推断为T[LF]:

export const mapObjectsToSelectOptions = 
<T extends object, VF extends keyof T, LF extends keyof T>(
  items: T[],
  valueField: VF,
  labelField: LF,
) => { // the inferred return type is OK: {value: T[VF], label: T[LF]}[]
  return items
    .map(o => ({
      value: o[valueField],
      label: o[labelField],
    }));
};

const testObject1 = {
    a: 1,
    b: 'B',
    c: 'Q'
}

const testObject2 = {
    a: 5,
    b: 'B',
    e: 'E'
}

const selectOptions = mapObjectsToSelectOptions([testObject1, testObject2], 'a', 'b');
// returned type is
// const selectOptions: {
//     value: number;
//     label: string;
// }[]

const selectOptions2 = mapObjectsToSelectOptions([testObject1, testObject2], 'a', 'c'); 
// error, not all objects have 'c'