面试题：TypeScript 类型断言在复杂类型场景下的应用

Question

已知有一个联合类型 `type MixedType = string | number | { value: string };`，有一个函数 `processValue`，接收 `MixedType` 类型的参数。请在函数内部，使用 `as` 和 `<T>` 类型断言，分别实现当参数为对象类型时，提取 `value` 属性值并返回的功能。同时说明在这个复杂联合类型场景下，使用类型断言可能会面临的风险以及如何规避。

Answer 1

function processValue(value: MixedType): string | undefined {
    // 使用 as 类型断言
    if (typeof value === 'object' && 'value' in value) {
        return (value as { value: string }).value;
    }

    // 使用 <T> 类型断言（注意：在tsx文件中不推荐，这里为了满足题目要求演示）
    if (typeof value === 'object' && 'value' in value) {
        return (<{ value: string }>value).value;
    }

    return undefined;
}

风险

1. 类型不匹配风险：如果使用类型断言将非对象类型或没有 value 属性的对象断言为 { value: string } 类型，运行时可能会导致 undefined 或 null 引用错误，例如传入一个 number 类型的值进行断言提取 value 属性。
2. 代码可维护性风险：过度使用类型断言可能会隐藏真实的类型错误，使代码在后续维护中难以理解和修改，因为绕过了TypeScript的类型检查机制。

规避方法

1. 类型保护：在进行类型断言前，使用 typeof、instanceof 或自定义类型谓词进行类型检查，如上述代码中先通过 typeof value === 'object' && 'value' in value 判断是否为期望的对象类型，确保类型断言的安全性。
2. 使用类型守卫函数：可以定义一个函数来进行更复杂的类型判断，返回一个类型谓词，提高代码的可读性和维护性。例如：

function isObjectWithValue(value: unknown): value is { value: string } {
    return typeof value === 'object' && value!== null && 'value' in value;
}

function processValueBetter(value: MixedType): string | undefined {
    if (isObjectWithValue(value)) {
        return value.value;
    }
    return undefined;
}