面试题：TypeScript中如何避免可推断类型导致代码混乱

可推断类型引发代码混乱的场景

函数返回值类型推断不明确
- 场景描述：当函数内部逻辑较为复杂，包含多种条件分支返回不同类型的值时，TypeScript 的类型推断可能无法准确确定返回值类型，导致后续调用该函数的代码出现类型错误。例如，一个函数根据传入参数的不同，有时返回字符串，有时返回数字。
- 示例代码：

function getValue(input: boolean) {
    if (input) {
        return 'hello';
    } else {
        return 42;
    }
}

// 以下调用时，TypeScript 推断返回值类型为 string | number
let result = getValue(true); 
// 如果后续代码按特定类型处理，如：
let length = result.length; 
// 这里会报错，因为 number 类型没有 length 属性

对象属性类型推断不清晰
- 场景描述：在对象字面量初始化时，如果属性值是动态计算的或者依赖于其他变量，TypeScript 可能无法正确推断属性类型，使得对象的类型在后续使用中变得混乱。
- 示例代码：

let flag = true;
let obj = {
    value: flag? 'text' : 123
};
// 此时 obj.value 的类型为 string | number
// 如果后续代码这样写：
let len = obj.value.length; 
// 会报错，因为 number 类型没有 length 属性

数组元素类型推断模糊
- 场景描述：当数组元素是通过复杂逻辑生成，或者包含不同类型元素的可能性时，TypeScript 对数组元素类型的推断可能不准确，造成代码中对数组元素操作的类型错误。
- 示例代码：

function createArray(useString: boolean) {
    let arr: any[] = [];
    if (useString) {
        arr.push('a');
    } else {
        arr.push(1);
    }
    return arr;
}

let myArray = createArray(true);
// 如果后续代码按特定类型处理数组元素，如：
let elementLength = myArray[0].length; 
// 当 myArray 中元素为数字时，会报错，因为 number 类型没有 length 属性

通过类型标注避免混乱的方法

函数返回值类型标注
- 针对上述函数返回值场景：可以明确标注函数的返回值类型，使调用者清楚知道函数返回值的类型。
- 修改后的代码：

function getValue(input: boolean): string | number {
    if (input) {
        return 'hello';
    } else {
        return 42;
    }
}

let result = getValue(true); 
if (typeof result ==='string') {
    let length = result.length; 
} else {
    // 处理 number 类型的逻辑
}

对象属性类型标注
- 针对对象属性类型场景：在定义对象时，直接标注属性的类型。
- 修改后的代码：

let flag = true;
let obj: { value: string | number } = {
    value: flag? 'text' : 123
};
if (typeof obj.value ==='string') {
    let len = obj.value.length; 
} else {
    // 处理 number 类型的逻辑
}

数组元素类型标注
- 针对数组元素类型场景：在定义数组时，明确数组元素的类型。
- 修改后的代码：

function createArray(useString: boolean): (string | number)[] {
    let arr: (string | number)[] = [];
    if (useString) {
        arr.push('a');
    } else {
        arr.push(1);
    }
    return arr;
}

let myArray = createArray(true);
myArray.forEach((element) => {
    if (typeof element ==='string') {
        let elementLength = element.length; 
    } else {
        // 处理 number 类型的逻辑
    }
});

面试题：TypeScript中如何避免可推断类型导致代码混乱

知识考点

面试题答案

可推断类型引发代码混乱的场景

通过类型标注避免混乱的方法