面试题：TypeScript 复杂类型下类型推断与类型注解的协同

Question

假设有一个函数，接受一个数组，数组中的元素可能是字符串、数字或者一个包含特定属性的对象，且函数要返回一个新数组，新数组元素根据原数组元素类型进行不同处理（字符串转大写，数字平方，对象提取特定属性）。请分别使用类型推断和类型注解实现该函数，并分析在这种复杂场景下两者的配合方式和可能遇到的问题。

Answer 1

使用类型推断实现

function processArray1(arr: (string | number | { specificProp: string })[]) {
    return arr.map((element) => {
        if (typeof element ==='string') {
            return element.toUpperCase();
        } else if (typeof element === 'number') {
            return element * element;
        } else {
            return element.specificProp;
        }
    });
}

使用类型注解实现

type ElementType = string | number | { specificProp: string };
function processArray2(arr: ElementType[]) {
    return arr.map((element: ElementType) => {
        if (typeof element ==='string') {
            return element.toUpperCase();
        } else if (typeof element === 'number') {
            return element * element;
        } else {
            return element.specificProp;
        }
    });
}

两者配合方式

• 类型推断为主，类型注解为辅：类型推断在很多情况下能够自动推导出正确的类型，例如在函数内部对参数和局部变量的类型推导。但在一些复杂场景，比如函数参数的类型比较复杂时，使用类型注解能够更清晰地表明意图，像ElementType类型别名定义数组元素的联合类型，让代码阅读者一目了然。
• 增强代码可读性：类型注解可以对函数参数和返回值进行明确的类型声明，与类型推断相互补充，在大型项目中，有助于团队成员理解代码的意图和数据流向。

可能遇到的问题

• 类型判断不准确：在使用类型推断时，如果代码逻辑比较复杂，类型推断可能无法正确推导出期望的类型，导致运行时错误。例如，在对象属性访问时，如果对象类型推断错误，可能会访问不存在的属性。
• 联合类型处理复杂：在这种联合类型的场景下，无论是类型推断还是类型注解，都需要谨慎处理。例如在类型保护时，需要准确判断元素类型，否则可能导致类型错误。如果使用类型注解定义了联合类型，在使用时必须通过类型保护来确保安全访问不同类型的属性和方法。
• 维护成本：过度使用类型注解可能增加维护成本，当数据结构发生变化时，需要同时修改类型注解；而类型推断也可能因为代码的修改导致类型推导错误，需要开发者仔细排查。