TypeScript中为函数返回对象实现显式键名自动补全

你的问题核心在于函数返回类型被TypeScript推断为{}，导致无法识别返回对象的具体结构，进而无法提供正确的类型提示。以下是具体的修复方案：

1. 明确基础类型定义（若未定义） #

先确保ResponsiveCustomComponentsStyle的类型结构清晰，示例如下：

// 单个组件的样式类型
type ComponentStyle = {
  width?: number;
  height?: number;
  maxHeight?: number;
};

// 响应式组件样式的整体类型
type ResponsiveCustomComponentsStyle = Record<string, {
  mobile: ComponentStyle;
  web: ComponentStyle;
}>;

2. 修改函数实现，添加泛型与精确类型映射 #

通过泛型捕获输入对象的具体键结构，搭配映射类型生成对应的返回类型：

// 映射类型：提取指定分支（mobile/web）的样式并提升层级
type ExtractResponsiveStyle<T extends ResponsiveCustomComponentsStyle, K extends 'mobile' | 'web'> = {
  [Key in keyof T]: T[Key][K];
};

const customComponentsStyle = <T extends ResponsiveCustomComponentsStyle, K extends 'mobile' | 'web'>(
  comps: T,
  mobileOrWeb: K
): ExtractResponsiveStyle<T, K> => {
  // 将Object.keys结果断言为输入对象的键数组，避免类型丢失
  return (Object.keys(comps) as Array<keyof T>).reduce((newObj, currentKey) => {
    const { width, height, maxHeight } = comps[currentKey][mobileOrWeb];
    const newObject = {
      ...(width && { width }),
      ...(height && { height }),
      ...(maxHeight && { maxHeight }),
    };

    return {
      ...newObj,
      [currentKey]: newObject,
    };
    // 指定reduce初始值的类型为目标返回类型
  }, {} as ExtractResponsiveStyle<T, K>);
};

3. 关键改动说明 #

• 泛型参数：<T extends ResponsiveCustomComponentsStyle, K extends 'mobile' | 'web'> 捕获输入对象的具体结构和指定分支类型，让返回类型能精确匹配输入。
• 映射类型ExtractResponsiveStyle：遍历输入类型的每个键，将对应值替换为指定分支的样式类型，实现类型层级的提升。
• Object.keys类型断言：TypeScript默认Object.keys返回string[]，通过as Array<keyof T>转换为输入对象的键数组，保留键的具体类型信息。
• reduce初始值类型：将初始值{}断言为ExtractResponsiveStyle<T, K>，明确告知TypeScript最终返回对象的结构。

4. 调用验证 #

修改后调用函数，TypeScript会自动补全属性，访问x.key1.width不再报错：

// 示例输入对象
const customComponents = {
  key1: {
    mobile: { width: 100, height: 50 },
    web: { width: 200, height: 100 }
  },
  key2: {
    mobile: { maxHeight: 80 },
    web: { maxHeight: 160 }
  }
};

const x = customComponentsStyle(customComponents, 'mobile');
console.log(x.key1.width); // 类型提示正常，无错误
console.log(x.key2.maxHeight); // 支持类型补全

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