TypeScript泛型实现字符串/数字数组拼接与求和的优化方案问询

你可以通过函数重载或自定义类型守卫来避免使用any，保持类型安全，以下是具体实现：

方案一：函数重载（推荐） #

函数重载能明确指定不同输入类型对应的逻辑，同时限制输入只能是纯数字数组或纯字符串数组，完全匹配你的需求：

// 定义重载签名，明确输入输出的对应关系
function arrayCat(n: number[]): string;
function arrayCat(n: string[]): string;

// 实现核心逻辑
function arrayCat(n: (number | string)[]): string {
  if (n.length === 0) return '';

  if (typeof n[0] === 'string') {
    return n.join(', ');
  } else {
    // 经过类型判断，TypeScript可直接推断n为number[]，无需强制类型转换
    const sum = n.reduce((prev, curr) => prev + curr, 0);
    return sum.toString();
  }
}

console.log(arrayCat([1, 2])); // 输出: "3"
console.log(arrayCat(['fish', 'cow'])); // 输出: "fish, cow"

优势： #

• 严格限制输入类型，禁止传入混合类型数组（如[1, 'a']），符合你接收纯字符串/数字数组的需求
• 调用函数时TypeScript会提供精准的类型提示，提前规避错误

方案二：自定义类型守卫 + 泛型 #

如果需要保留泛型的灵活性，可通过自定义类型守卫让TypeScript准确推断数组类型：

// 自定义类型守卫，判断数组是否为纯数字数组
function isNumberArray(arr: (number | string)[]): arr is number[] {
  return typeof arr[0] === 'number';
}

function arrayCat<T extends number | string>(n: T[]): string {
  if (n.length === 0) return '';

  if (typeof n[0] === 'string') {
    return n.join(', ');
  } else if (isNumberArray(n)) {
    // 类型守卫生效，n被TypeScript明确推断为number[]
    const sum = n.reduce((prev, curr) => prev + curr, 0);
    return sum.toString();
  }

  return '';
}

优势： #

• 保留泛型的扩展性，同时避免any带来的类型丢失问题
• 类型守卫逻辑可复用，适合更复杂的类型判断场景

原代码问题说明 #

你之前用const v: Array<any> = n确实违背了TypeScript的类型安全设计——any会绕过所有类型检查，可能隐藏潜在错误。上面两种方案都依托TypeScript的类型系统完成自动推断，完全不需要借助any。

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