TypeScript中如何实现支持泛型指定返回类型的函数？

报错原因 #

TypeScript 抛出该错误的核心原因是：你仅约束了泛型 T 是 SupportedSectionTypes 的子类型，但函数内部拿到的 section 是三个类型的联合类型，TS 无法保证你调用时传入的泛型 T 和实际返回的 section 类型完全匹配。比如你手动指定泛型为 CheckedSection，但传入的 key 实际对应的是 BasicSection 类型的板块，就会出现类型不匹配的问题，TS 的类型校验会阻止这种潜在风险。

解决方案 #

方案1：添加类型断言（简单快捷，适合小项目） #

如果你能保证调用时传入的泛型和 key 对应的板块类型完全一致，可以直接给返回值添加类型断言告诉 TS 你确认类型匹配：

export const getSectionData = <T extends SupportedSectionTypes>(
  key: string,
): T => {
  const section: SupportedSectionTypes = SECTIONS[key];
  if (section) return section as T;
  throw new Error('该板块尚未实现！');
};

方案2：绑定Key与类型映射（完全类型安全，推荐） #

如果希望完全避免类型不匹配的问题，可以提前定义所有板块 key 和对应类型的映射关系，让 TS 自动推导返回值类型，不需要手动指定泛型：

// 1. 提前定义所有板块key与对应类型的映射
type SectionTypeMap = {
  // 把所有板块的key和对应类型一一列在这里
  my_basic_section: BasicSection;
  my_card_section: CardSection;
  my_checked_section: CheckedSection;
};

// 2. 板块集合类型直接复用上述映射，不再允许任意字符串key
type SectionCollection = SectionTypeMap;
export const SECTIONS: SectionCollection = sections;

// 3. 函数泛型直接绑定key的类型，返回值自动匹配对应类型
export const getSectionData = <K extends keyof SectionTypeMap>(
  key: K,
): SectionTypeMap[K] => {
  const section = SECTIONS[key];
  if (section) return section;
  throw new Error('该板块尚未实现！');
};

// 使用时无需手动指定泛型，TS自动推导返回值类型
const sectionData = getSectionData("my_checked_section");
// 自动识别sectionData类型为CheckedSection

该方案还能额外获得两个好处：

• 调用时TS会自动校验传入的key是否合法，避免拼写错误
• 无需手动写泛型，减少冗余代码

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