如何在TypeScript中编写支持字符串/字符串数组的首字母大写函数

你编写的capitalize函数逻辑本身是正确的，但TypeScript无法自动关联输入类型与返回类型，导致调用后变量类型会被推断为string | string[]，无法满足你期望的精确类型对应需求。以下是两种可行的修正方案：

方案1：使用函数重载 #

通过函数重载明确指定不同输入对应的返回类型，让TypeScript能够精准推断结果类型：

export function capitalize(input: string): string;
export function capitalize(input: string[]): string[];
export function capitalize(input: string | string[]) {
  const doCapitalize = (str: string) => {
    // 处理空字符串的边界情况
    if (!str) return str;
    const capital = str.charAt(0).toUpperCase();
    return `${capital}${str.slice(1)}`;
  };

  if (typeof input === 'string') {
    return doCapitalize(input);
  }

  return input.map(doCapitalize);
}

方案2：使用泛型+条件类型 #

通过泛型约束和条件类型，动态匹配输入与返回的对应类型：

export function capitalize<T extends string | string[]>(input: T): T extends string ? string : string[] {
  const doCapitalize = (str: string) => {
    if (!str) return str;
    const capital = str.charAt(0).toUpperCase();
    return `${capital}${str.slice(1)}`;
  };

  if (typeof input === 'string') {
    return doCapitalize(input) as ReturnType<typeof capitalize<T>>;
  }

  return input.map(doCapitalize) as ReturnType<typeof capitalize<T>>;
}

验证效果 #

两种方案都能实现你期望的类型匹配效果：

const cap1 = capitalize('capital');
cap1 === 'Capital'; // 变量类型为string，判断结果为true

const cap2 = capitalize(['capitalA', 'capitalB']);
cap2[0] === 'CapitalA'; // 变量类型为string[]，判断结果为true

内容的提问来源于stack exchange，提问作者Md. A. A. Apu