TypeScript递归解析数组的函数返回类型问题

问题场景 #

编写了一个将单个实体或实体数组转换为Select组件所需{label, value}结构的函数，但递归调用导致TypeScript编译器推断返回类型错误，报错提示(SelectOption | SelectOption[])[]无法赋值给SelectOption | SelectOption[]，不想用类型断言解决。

错误原因 #

TypeScript编译器无法自动推断：当递归调用传入单个实体时，函数一定会返回SelectOption类型。因此它会把map的结果推断为(SelectOption | SelectOption[])[]，和函数声明的返回类型不匹配。

无需类型断言的解决方案 #

方案1：拆分单个实体转换逻辑 #

把单个实体的转换逻辑抽成独立函数，数组分支直接调用这个函数，TypeScript能准确推断返回类型。

const selectValueTranformationKeys = {
  mobilePhone: { valuePropName: "mobilePhoneId", labelPropName: "description" },
  tv: { valuePropName: "tvId", labelPropName: "description" },
  pc: { valuePropName: "pcId", labelPropName: "description" },
};

type SelectOption = {
  label: string;
  value: any;
};

// 抽离单个实体的转换逻辑
const transformSingleEntity = <T extends Record<string, unknown>>(
  entity: T,
  entityType: keyof typeof selectValueTranformationKeys,
  params?: { disabled?: boolean; tags?: string[] }
): SelectOption => {
  const valueKey = selectValueTranformationKeys[entityType].valuePropName as keyof T;
  const labelKey = selectValueTranformationKeys[entityType].labelPropName as keyof T;
  return {
    label: `${entity[labelKey]}`,
    value: entity[valueKey],
    ...params // 若需要合并disabled等参数可保留
  };
};

export const transformIntoSelectValue = <T extends Record<string, unknown>>(
  entity: T | T[],
  entityType: keyof typeof selectValueTranformationKeys,
  params?: { disabled?: boolean; tags?: string[] }
): SelectOption | SelectOption[] => {
  if (Array.isArray(entity)) {
    // 调用独立函数，TS能明确返回SelectOption数组
    return entity.map(item => transformSingleEntity(item, entityType, params));
  }
  return transformSingleEntity(entity, entityType, params);
};

const exampleTv = {
  tvId: 3,
  description: "Samsung"
};

方案2：使用函数重载 #

通过函数重载明确声明不同入参对应的返回类型，让TypeScript直接匹配正确的类型关系，无需额外推断。

const selectValueTranformationKeys = {
  mobilePhone: { valuePropName: "mobilePhoneId", labelPropName: "description" },
  tv: { valuePropName: "tvId", labelPropName: "description" },
  pc: { valuePropName: "pcId", labelPropName: "description" },
};

type SelectOption = {
  label: string;
  value: any;
};

// 定义函数重载：单个实体入参返回SelectOption
export function transformIntoSelectValue<T extends Record<string, unknown>>(
  entity: T,
  entityType: keyof typeof selectValueTranformationKeys,
  params?: { disabled?: boolean; tags?: string[] }
): SelectOption;

// 定义函数重载：实体数组入参返回SelectOption数组
export function transformIntoSelectValue<T extends Record<string, unknown>>(
  entity: T[],
  entityType: keyof typeof selectValueTranformationKeys,
  params?: { disabled?: boolean; tags?: string[] }
): SelectOption[];

// 函数实现
export function transformIntoSelectValue<T extends Record<string, unknown>>(
  entity: T | T[],
  entityType: keyof typeof selectValueTranformationKeys,
  params?: { disabled?: boolean; tags?: string[] }
): SelectOption | SelectOption[] {
  if (Array.isArray(entity)) {
    // 递归调用时，TS通过重载知道单个实体入参返回SelectOption，map结果为SelectOption[]
    return entity.map(item => transformIntoSelectValue(item, entityType, params));
  }

  const valueKey = selectValueTranformationKeys[entityType].valuePropName as keyof T;
  const labelKey = selectValueTranformationKeys[entityType].labelPropName as keyof T;
  return {
    label: `${entity[labelKey]}`,
    value: entity[valueKey],
    ...params
  };
};

const exampleTv = {
  tvId: 3,
  description: "Samsung"
};

方案对比 #

• 拆分函数：逻辑更清晰，避免递归带来的类型推断问题，适合简单场景。
• 函数重载：保留递归写法，同时通过明确的类型声明解决推断问题，适合需要复用递归逻辑的场景。

内容的提问来源于stack exchange，提问作者César Rodriguez