PhpStorm中泛型、模板字面量类型与联合类型兼容问题

我编写了一个接收两个字符串参数的函数，通过泛型和模板字面量类型声明返回类型。但遇到了类型推导异常：当两个参数均为单一字面量或均为联合类型时，返回类型能正确推导；但如果一个参数是联合类型、另一个是单一字面量，返回类型会被推导为string，而非预期的联合字面量集合。

问题复现代码 #

function example<T extends string, U extends string>(arg1: T, arg2: U): `${Uncapitalize<T>}${Capitalize<U>}` {
  return `${arg1[0].toLowerCase()}${arg1.slice(1)}${arg2[0].toUpperCase()}${arg2.slice(1)}`;
}

// 正常：返回类型 "testExample"
declare const arg11: 'test', arg12: 'example';
const result1 = example(arg11, arg12);

// 异常：返回类型 string（预期应为 "testExample" | "testTwoExample"）
declare const arg21: 'test' | 'testTwo', arg22: 'example';
const result2 = example(arg21, arg22);

// 异常：返回类型 string（预期应为 "testExample" | "testExample2"）
declare const arg31: 'test', arg32: 'example' | 'example2';
const result3 = example(arg31, arg32);

// 正常：返回类型 "testExample" | "testExample2" | "test2Example" | "test2Example2"
declare const arg41: 'test' | 'test2', arg42: 'example' | 'example2';
const result4 = example(arg41, arg42);

修复方案 #

问题根源是TypeScript默认不会对单一字面量与联合类型的组合自动触发模板字面量的分布式展开。我们可以利用分布式条件类型强制让每个联合成员都被单独处理。

方案1：使用辅助类型 #

// 定义辅助分布式类型，确保联合类型的每个成员都参与模板字面量拼接
type CombineStrings<T extends string, U extends string> = 
  T extends string 
    ? U extends string 
      ? `${Uncapitalize<T>}${Capitalize<U>}` 
      : never 
    : never;

function example<T extends string, U extends string>(arg1: T, arg2: U): CombineStrings<T, U> {
  return `${arg1[0].toLowerCase()}${arg1.slice(1)}${arg2[0].toUpperCase()}${arg2.slice(1)}` as CombineStrings<T, U>;
}

方案2：直接内嵌分布式逻辑 #

如果不想额外定义辅助类型，也可以把分布式逻辑直接写在返回类型中：

function example<T extends string, U extends string>(arg1: T, arg2: U): 
  T extends string ? U extends string ? `${Uncapitalize<T>}${Capitalize<U>}` : never : never {
  return `${arg1[0].toLowerCase()}${arg1.slice(1)}${arg2[0].toUpperCase()}${arg2.slice(1)}` as any;
}

修复效果 #

修改后所有场景的类型推导都会正常工作：

• result2返回类型变为"testExample" | "testTwoExample"
• result3返回类型变为"testExample" | "testExample2"
• 原有正常场景的类型推导保持不变

原理说明 #

分布式条件类型的核心特性是：当条件类型的检查目标是联合类型时，会自动拆分联合类型为单个成员，逐一处理后再将结果合并为新的联合类型。通过将T和U分别放入条件类型的extends分支，我们强制TypeScript对每个联合成员单独执行模板字面量拼接，从而得到准确的返回类型集合。

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